Webpack 4-创建供应商块 [英] Webpack 4 - create vendor chunk

问题描述

在webpack 3配置中，我将使用以下代码创建单独的vendor.js块:

In a webpack 3 configuration I would use the code below to create separate vendor.js chunk:

entry: {
    client: ['./client.js'],
    vendor: ['babel-polyfill', 'react', 'react-dom', 'redux'],
},

output: {
  filename: '[name].[chunkhash].bundle.js',
  path: '../dist',
  chunkFilename: '[name].[chunkhash].bundle.js',
  publicPath: '/',
},

plugins: [
    new webpack.HashedModuleIdsPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'runtime',
    }),
],

对于所有更改，我不确定如何使用Webpack 4进行操作.我知道CommonChunksPlugin已删除，因此有另一种方法可以实现.我还阅读了本教程，但是我仍然不确定要提取运行时块并正确定义output属性.

With all the changes I'm not sure how to do it with Webpack 4. I know that CommonChunksPlugin was removed, so there is a different way to achieve that. I've also read this tutorial but I'm still not sure about extracting runtime chunk and properly defining output property.

不幸的是，我在这里遇到的问题是最受欢迎的答案.查看我的答案.

Unfortunately, I was experiencing issues with the most popular answer here. Check out my answer.

推荐答案

此处有一些示例: https://github.com/webpack/webpack/tree/master/examples

根据您的示例，我认为这可以翻译为:

Based on your example i believe this translate to:

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

这篇关于Webpack 4-创建供应商块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！