Webpack 打包自定义库时生成 [hash].worker.js 文件

Posted 2023-02-23

【中文标题】Webpack 打包自定义库时生成 [hash].worker.js 文件

【英文标题】：Webpack generating [hash].worker.js file when packaging custom library

【发布时间】：2020-08-08 12:04:17

【问题描述】：

我正在尝试创建一个可重用的 React 组件库以供我们内部使用。

Webpack 正在捆绑输出 - 应该 是单个文件。但它实际上是把我期望的 bundle.js 加上一个名为 [some_hash].worker.js 的文件。

我不确定如何强制 webpack 将那个“worker”文件包含在我要求的单个包中。

webpack.config：

const path = require('path');
const webpack = require('webpack');

const DIST_PATH = path.resolve(__dirname, "../dist");
const SRC_PATH = path.resolve(__dirname, "../src");
const APP_PATH = path.resolve(__dirname, "../src/index.js");
const BASE_PATH = path.resolve(__dirname);
const  CleanWebpackPlugin  = require('clean-webpack-plugin');

module.exports = ( appPath = APP_PATH, distPath = DIST_PATH ) => (
  context: BASE_PATH,
  devServer: 
    contentBase: distPath,
    compress: true,
    port: 9000,
    historyApiFallback: true
  ,
  resolve: 
    modules: ['node_modules', SRC_PATH],
    alias: 
      'react': path.resolve(__dirname, '../node_modules/react'),
      'react-dom': path.resolve(__dirname, '../node_modules/react-dom'),
    
  ,
  externals: 
      // Don't bundle react or react-dom
      react: 
        commonjs: "react",
        commonjs2: "react",
        amd: "React",
        root: "React"
      ,
      "react-dom": 
        commonjs: "react-dom",
        commonjs2: "react-dom",
        amd: "ReactDOM",
        root: "ReactDOM"
      
  ,
  entry: 
    bundle: appPath,
  ,
  output: 
    path: distPath,
    filename: 'index.js',
    publicPath: '/dist/',
    library: 'internal-components',
    libraryTarget: 'umd',
    umdNamedDefine: true
  ,
  module: 
    rules: [
      
        test: /\.jsx$/,
        use: 
          loader: 'babel-loader',
          options: 
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: [
              '@babel/plugin-proposal-object-rest-spread',
              '@babel/plugin-syntax-dynamic-import',
              [ '@babel/plugin-proposal-decorators',  'legacy': true  ],
              [ '@babel/plugin-proposal-class-properties',  'loose': true  ]
            ]
          
        
      ,
      
        test: /\.js$/,
        exclude: /(node_modules|build)/,
        use: 
          loader: 'babel-loader',
          options: 
            presets: ['@babel/preset-env'],
            plugins: [
              '@babel/plugin-proposal-object-rest-spread',
              '@babel/plugin-syntax-dynamic-import',
              ['@babel/plugin-proposal-decorators', 'legacy': true],
              ["@babel/plugin-proposal-class-properties", 'loose': true]
            ]
          
        
      ,
      ...
    ]
  ,
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.optimize.LimitChunkCountPlugin(
      maxChunks: 1,
    )
  ]
);

【参考方案1】：

您可以尝试使用带有内联的worker-loader plugin 来处理捆绑 -

rules: [
      ...
      
        test: /\.worker\.js$/,
        use: 
           loader: 'worker-loader',
           options:  inline: true, fallback: false 
        
      
    ]

也就是说，Github 上有几个未解决的问题，围绕着使用 worker 作为blob，所以 YMMV

【参考方案2】：

实际上，如果您使用的是 webpack 3 及更高版本，捆绑包的分块会自动为您完成。在 SplitChunks 插件文档 here 中，它实际上说明了它的行为方式。

因此，您可能需要扫描您的代码并检查这种情况。另外很高兴知道您是否正在异步导入某些模块？这可能会向 webpack 发出信号，让它成为一个单独的块。