Webpack 重复捆绑包中的包

Question

这是捆绑分析器的输出：

正如你所看到的，react-dom、jquery 和 mobx 包都在 shell 包和供应商包中。是否可以仅将它们放入供应商捆绑包中？

更新 这是配置文件：

entry: {
    shell: './src/shell.ts',
    vendor: [
      'jquery',
      'react',
      'react-dom',
      'react-router',
      'mobx',
      'mobx-react',
      'toastr',
      'styled-components',
    ],
  },
  output: {
    path: __dirname + '/dist',
    filename: '[name]bundle.js?[hash:8]',
    publicPath: '/',
  },
  devtool: PROD ? false : 'source-map',
  resolve: {
    extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.json'],
    modules: ['node_modules'],
  },
  optimization: {
    minimize: !!PROD,
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
    new ExtractTextPlugin('[name].css?[hash:8]', {
      allChunks: true,
      disable: !PROD,
    }),
    new HtmlWebpackPlugin({
      chunksSortMode: 'dependency',
      template: './src/index.tpl.html',
    }),
    new BundleAnalyzerPlugin(),
  ],
  

Answer 1

您可以使用优化 webpack 设置将来自该文件夹的所有供应商代码拆分node_modules为单个vender捆绑文件splitChunks。

首先，从vendor您的entry.

然后，将以下代码添加到您的config文件中：

optimization: {
    splitChunks: {
        cacheGroups: {
            vendors: {
                test: /[\\/]node_modules[\\/]/ ,
                name: 'vendor' ,
                chunks: 'all' ,
                enforce: true ,
            }
        }
    }
}