Updates involving webpack

Author: harmony7

MIGRATING.md

@@ -39,13 +39,13 @@ been using the feature, you can take the following steps:
 
 ## Webpack
 
-Starting with `v4.0.0` of this tool, Webpack is no longer required and is disabled by default for new applications. This can simplify development and result in shorter build times. 
+Starting with `v4.0.0` of this tool, webpack is no longer required and is disabled by default for new applications. This can simplify development and result in shorter build times. 
 
-You may still wish to use Webpack if you need some of the features it provides, e.g., the ability to use loaders, asset modules, module replacement, dynamic imports, etc.
+You may still wish to use webpack if you need some of the features it provides, e.g., the ability to use loaders, asset modules, module replacement, dynamic imports, etc.
 
-To migrate away from using Webpack, make the following changes in your `./compute-js` directory:
+To migrate away from using webpack, make the following changes in your `./compute-js` directory:
 
-* First, check your `webpack.config.js` file to make sure you aren't actually depending on any custom Webpack features. When you're ready, continue to the next step.
+* First, check your `webpack.config.js` file to make sure you aren't actually depending on any custom webpack features. When you're ready, continue to the next step.
 * Delete `webpack.config.js`.
 * Modify `static-publish.rc.js`:
   * Change the line `module.exports = {` to `const config = {`
@@ -65,27 +65,52 @@ To migrate away from using Webpack, make the following changes in your `./comput
     }
     ```
 
-If you aren't moving away from Webpack just yet, check that your `webpack.config.js` is up-to-date:
+If you aren't moving away from webpack just yet, check that your `webpack.config.js` is up-to-date. Refer
+to the [default `webpack.config.js` in this package](./resources/webpack.config.js) and add your changes,
+or modify your configuration file using the following steps:
 
-* Starting `v3.0.0`, we depend on `v1.0.0` of the `js-compute` library, which provides namespaced exports for Fastly
-  features. To use them, you'll need to add a new `externals` array to the bottom if it doesn't exist already, with
-  the following entry:
+* To make the resulting bundle easier to debug, it is recommended to set the `devtool` value to `false`.
 
-  ```javascript
-  module.exports = {
-    /* ... other config ... */
-    externals: [
-      ({request,}, callback) => {
-         if (/^fastly:.*$/.test(request)) {
-             return callback(null, 'commonjs ' + request);
-         }
-         callback();
-      }
+* The JavaScript SDK automatically adds the named condition `fastly` when resolving dependency packages.
+  To match the behavior when bundling with webpack, set `resolve.conditionsNames` to the following:
+    ```
+    resolve: {
+      conditionNames: [
+        'fastly',
+        '...',
+      ],
     ],
-  }
-  ```
+    ``` 
+
+* Starting `v3.0.0`, we depend on `v1.0.0` of the `js-compute` library, which provides namespaced exports for Fastly
+  features. To use them, you'll need to make the following changes to `webpack.config.js`:
+
+  * Set the `target` value to `false`.
+
+  * The `output` section should look like this:
+    ```
+    output: {
+      filename: "index.js",
+      path: path.resolve(__dirname, "bin"),
+      chunkFormat: 'commonjs',
+      library: {
+        type: 'commonjs',
+      },
+    },
+    ``` 
+
+  * Add a new `externals` array to the bottom if it doesn't exist already. Add the following entry:
+
+    ```javascript
+    module.exports = {
+      /* ... other config ... */
+      externals: [
+        /^fastly:.*$/,
+      ],
+    }
+    ```
 
-* Starting `v3.0.0`, we no longer use Webpack static assets to include the contents of static files, and instead [use the
+* Starting `v3.0.0`, we no longer use webpack static assets to include the contents of static files, and instead [use the
   `includeBytes` function](https://js-compute-reference-docs.edgecompute.app/docs/fastly:experimental/includeBytes)
   to enable more performant loading, as well as a more size-efficient Wasm binary. As a result, the following code can
   safely be removed from the `module.rules` array.
@@ -113,7 +138,7 @@ If you aren't moving away from Webpack just yet, check that your `webpack.config
     },
   ```
 
-If you need Webpack for a new project you are scaffolding with this site, specify the `--webpack` command-line option
+If you need webpack for a new project you are scaffolding with this site, specify the `--webpack` command-line option
 when you scaffold your application, e.g.:
 
 ```
@@ -217,7 +242,7 @@ See [static-publish.rc.js config file](./README.md#static-publish-rc) for a deta
       build = "npm run build"
       ```
 
-    * If you're using Webpack, then the `scripts` section of `package.json` of your `compute-js` directory should contain
+    * If you're using webpack, then the `scripts` section of `package.json` of your `compute-js` directory should contain
       the following items (along with any other scripts):
       ```json
       {
@@ -226,7 +251,7 @@ See [static-publish.rc.js config file](./README.md#static-publish-rc) for a deta
       }
       ```
 
-    * If you're not using Webpack, then the `scripts` section of `package.json` of your `compute-js` directory should
+    * If you're not using webpack, then the `scripts` section of `package.json` of your `compute-js` directory should
       contain the following items (along with any other scripts):
       ```json
       {

README.md

@@ -64,7 +64,7 @@ npm run deploy
 - Content and metadata are available to your application, accessible by files' pre-package file paths.
 - Brotli and Gzip compression.
 - Support for `If-None-Match` and `If-Modified-Since` request headers.
-- Optionally use Webpack as a module bundler.
+- Optionally use webpack as a module bundler.
 - Selectively serve files from Fastly's [KV Store](#kv-store), or embedded into your Wasm module.
 - Supports loading JavaScript files as code into your Compute application.
 - Presets for several static site generators.
@@ -583,10 +583,10 @@ publishing event.
 
 See the definition of `ContentAssetMetadataMapEntry` in the [`types/content-assets` file](./src/types/content-assets.ts) for more details.
 
-### Using Webpack
+### Using webpack
 
-As of v4, Webpack is no longer required, and is no longer part of the default scaffolded application.
-If you wish to use some features of Webpack, you may include Webpack in your generated application by specifying
+As of v4, webpack is no longer required, and is no longer part of the default scaffolded application.
+If you wish to use some features of webpack, you may include webpack in your generated application by specifying
 `--webpack` at the command line.
 
 ## Migrating

resources/webpack.config.js

@@ -2,32 +2,40 @@ const path = require("path");
 
 module.exports = {
   entry: "./src/index.js",
+  target: false,
+  devtool: false,
   optimization: {
     minimize: true
   },
-  target: "webworker",
   output: {
     filename: "index.js",
     path: path.resolve(__dirname, "bin"),
-    libraryTarget: "this",
+    chunkFormat: 'commonjs',
+    library: {
+      type: 'commonjs',
+    },
   },
   module: {
     // Loaders go here.
     // e.g., ts-loader for TypeScript
     // rules: [
     // ],
   },
+  resolve: {
+    conditionNames: [
+      'fastly',
+      '...',
+    ],
+  },
   plugins: [
-    // Polyfills go here.
-    // Used for, e.g., any cross-platform WHATWG,
-    // or core nodejs modules needed for your application.
+    // Webpack Plugins and Polyfills go here
+    // e.g., cross-platform WHATWG or core Node.js modules needed for your application.
+    // new webpack.ProvidePlugin({
+    // }),
   ],
   externals: [
-    ({request,}, callback) => {
-      if (/^fastly:.*$/.test(request)) {
-        return callback(null, 'commonjs ' + request);
-      }
-      callback();
-    }
+    // Allow webpack to handle 'fastly:*' namespaced module imports by treating
+    // them as modules rather than trying to process them as URLs
+    /^fastly:.*$/,
   ],
 };

src/cli/commands/init-app.ts

@@ -492,7 +492,7 @@ export function initApp(commandLineValues: CommandLineOptions) {
   console.log('KV Store Name           :', kvStoreName ?? '(None)');
   console.log('');
   if (useWebpack) {
-    console.log('Creating project with Webpack.');
+    console.log('Creating project with webpack.');
     console.log('');
   }
 

src/cli/index.ts

@@ -22,7 +22,7 @@ const optionDefinitions: OptionDefinition[] = [
   { name: 'suppress-framework-warnings', type: Boolean },
   { name: 'output', alias: 'o', type: String, defaultValue: './compute-js', },
 
-  // Whether the scaffolded project should use Webpack to bundle assets.
+  // Whether the scaffolded project should use webpack to bundle assets.
   { name: 'webpack', type: Boolean, defaultValue: false },
 
   // The 'root' directory for the publishing.