javascript Webpack复制捆绑包中的包

afdcj2ne 于 2023-02-28 发布在 Java

关注(0)|答案(2)|浏览(120)

以下是束分析器的输出：

正如你所看到的react-dom包一样，jquery和mobx都在shell包和vendor包中，有没有可能只把它们放在vendor包中呢？

UPDATE以下是配置文件：

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(),
  ],

JavaScript

来源：https://stackoverflow.com/questions/65024413/webpack-duplicates-packages-in-bundle

2条答案

按热度按时间

nlejzf6q1#

您可以使用splitChunks优化webpack设置将来自node_modules文件夹的所有供应商代码拆分到单个vender捆绑包文件中。
首先，从您的entry中删除vendor。
然后，将以下代码添加到config文件中：

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

赞(0）回复(0）举报 2023-02-28

epggiuax2#

您使用entry手动拆分代码，e.g.存在一些缺陷：
如果条目块之间存在任何重复的模块，则它们将被包括在两个束中。
您可以使用Entry dependencies或SplitChunksPlugin来阻止它。
下面是Entry dependencies的示例：

entry: {
    shell: {import: './src/shell.ts', dependOn: 'vendor'},
    vendor: [
      'jquery',
      'react',
      'react-dom',
      'react-router',
      'mobx',
      'mobx-react',
      'toastr',
      'styled-components',
    ],
  },

由于您将在同一个HTML页面中使用两个入口点，请记住启用optimization.runtimeChunk: 'single'。
有详细的解释代码拆分指南的webpack，你可以阅读那里了。

赞(0）回复(0）举报 2023-02-28

我来回答

javascript Webpack复制捆绑包中的包

2条答案

相关问题

热门标签

最新问答