Webpack生产构建中如何正确引用Web Workers？

Hey there! Let's break down your Web Worker chunkhash issue and the best practices for using them in your Angular + Webpack setup:

You're using the Angular Webpack Starter, which leverages chunkhash for production builds. You've configured Webpack to bundle your Web Worker into a separate file (worker.[chunkhash].bundle.js) in the dist folder, and now you need a reliable way to reference this hashed filename in your new Worker() constructor. You also want to evaluate two potential solutions and learn the standard best practices for Web Worker integration.

If you want to stick with your current entry-based Webpack configuration, here are two solid approaches:

1. Use the webpack-manifest-plugin #

This plugin generates a JSON file that maps your original entry filenames to their hashed production counterparts.

• First, install it:

  npm install webpack-manifest-plugin --save-dev
  

• Add it to your webpack.prod.js plugins array:

  const ManifestPlugin = require('webpack-manifest-plugin');
  
  // Inside the plugins array
  new ManifestPlugin({
    fileName: 'asset-manifest.json'
  })
  

• After building, you'll get an asset-manifest.json in your dist folder with content like:

  {
    "worker.js": "worker.abc123def456.bundle.js",
    "main.js": "main.xyz789.bundle.js",
    ...
  }
  

• In your Angular code, fetch this manifest (either via HTTP or by injecting it into the global scope) to get the correct worker path:

  // Example: Fetch the manifest and initialize the worker
  fetch('/asset-manifest.json')
    .then(res => res.json())
    .then(manifest => {
      const workerPath = manifest['worker.js'];
      const w = new Worker(workerPath);
      // Use your worker here
    });
  

2. Inject the Worker Path via html-webpack-plugin #

Since the Angular Webpack Starter uses html-webpack-plugin, you can inject the hashed worker path directly into your index.html as a global variable:

• In your index.html template, add this script tag:

  <script>
    window.workerBundlePath = '<%= htmlWebpackPlugin.files.chunks.worker.entry %>';
  </script>
  

• Then in your Angular code, use the global variable to initialize the worker:

  const w = new Worker(window.workerBundlePath);
  

Solution 1: Store Worker in assets and reference directly #

• Pros: Extremely simple, no extra Webpack configuration required.
• Cons: You lose all Webpack benefits for the worker: no tree-shaking, no Babel transpilation (if needed), no dependency bundling. Also, you can't leverage chunkhash for cache busting—you'd have to manually rename the file whenever you update it, which is error-prone and not scalable.

Solution 2: Use CopyWebpackPlugin to copy the worker #

• Pros: Lets you keep your original worker file and add cache busting (you can configure the plugin to append a hash to the copied file).
• Cons: Same as the first solution—you can't use Webpack's module system for the worker. If your worker depends on other modules, you'll have to handle bundling manually, which defeats the purpose of using Webpack in the first place.

The most robust and maintainable approach is to use worker-loader, a Webpack official loader designed specifically for handling Web Workers. Here's how to set it up:

1. Install the loader:

   npm install worker-loader --save-dev
   

2. Add a rule to your webpack.common.js (or webpack.prod.js) to process worker files:

   module.exports = function(options) {
     ...
     module: {
       rules: [
         // Existing rules...
         {
           test: /\.worker\.js$/,
           use: {
             loader: 'worker-loader',
             options: {
               filename: 'worker.[chunkhash].bundle.js' // Matches your production naming pattern
             }
           }
         }
       ]
     },
     ...
   }
   

3. Now you can import and initialize your worker like any other module in Angular:

   import DocumentUploadWorker from './documents/webworkers/documentupload.webworker.js';
   
   // Initialize the worker
   const w = new DocumentUploadWorker();
   

This approach automatically handles:

• Bundling the worker and its dependencies
• Generating the chunkhash filename
• Correctly resolving the worker path in both development and production

If you must stick with your entry-based setup, using webpack-manifest-plugin is the next best option, as it keeps your worker integrated with Webpack's build pipeline.

webpack.common.js #

module.exports = function (options) { 
  ... 
  const entry = { 
    polyfills: './src/polyfills.browser.ts', 
    main: './src/main.browser.ts', 
    worker: './src/app/documents/webworkers/documentupload.webworker.js' 
  }; 
  ... 
}

webpack.prod.js #

module.exports = function (env) { 
  ... 
  return webpackMerge(commonConfig({env: ENV, metadata: METADATA}), { 
    output: { 
      path: helpers.root('dist'), 
      filename: '[name].[chunkhash].bundle.js', 
      sourceMapFilename: '[file].map', 
      chunkFilename: '[name].[chunkhash].chunk.js' 
    }, 
    module: { 
      rules: [ 
        { 
          test: /\.css$/, 
          loader: ExtractTextPlugin.extract({ 
            fallback: 'style-loader', 
            use: 'css-loader' 
          }), 
          include: [helpers.root('src', 'styles')] 
        }, 
        { 
          test: /\.scss$/, 
          loader: ExtractTextPlugin.extract({ 
            fallback: 'style-loader', 
            use: 'css-loader!sass-loader' 
          }), 
          include: [helpers.root('src', 'styles')] 
        }, 
      ] 
    }, 
    plugins: [ 
      new SourceMapDevToolPlugin({ 
        filename: '[file].map[query]', 
        moduleFilenameTemplate: '[resource-path]', 
        fallbackModuleFilenameTemplate: '[resource-path]?[hash]', 
        sourceRoot: 'webpack:///' 
      }), 
      ... 
    ] 
  });
}

内容的提问来源于stack exchange，提问作者dcs3spp