WebPack4与代码拆分

Question

entry: {
        main: './src/app.js',
        vendor: ['babel-polyfill','react','react-dom',"jquery","bootstrap"]
},

new webpack.HashedModuleIdsPlugin({
            // Options...
}),
new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
}),
new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest'
})

下面是WebPack4配置代码：

entry: {
        main: './src/app.js'
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                default: false,
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "initial"
                }
            }
        }
    },

新的配置代码从项目中使用的节点模块中获取所有代码。但我只希望拆分供应商库（我在enrtry配置部分定义），而不希望拆分node_modules中的所有代码。

在本例中：“babel-polyfill”,“react”,“react-dom”,“jquery”,“bootstrap”

entry: {
        main: './src/app.js',
        vendor: ['babel-polyfill','react','react-dom',"jquery","bootstrap"]
},

Answer 1

其实我问了一个很相似的问题。

以下是如何仅为必需的包创建供应商捆绑包：

// mode: "development || "production",
entry: {
  vendor: ['babel-polyfill', 'react', 'react-dom', 'redux'],
  main: './client.js',
},
output: {
  path: path.join(__dirname, '../dist'),
  filename: '[name].[chunkhash:8].bundle.js',
  chunkFilename: '[name].[chunkhash:8].bundle.js',
  publicPath: '/',
},
optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        chunks: 'initial',
        name: 'vendor',
        test: 'vendor',
        enforce: true
      },
    }
  },
  runtimeChunk: true
}

您不需要hashedmoduleidsplugin运行时块将自动生成。