Question

我不知道这个新的Webpack 4 splitCunks有什么用，以及如何用它生成捆绑包和供应商文件。直到现在我一直在像这样使用它

entry: {
    vendor: [ '@babel/polyfill', 'react', 'react-dom', 'react-router-dom', ],
    bundle: [ './app.js', ],
  },
  output: {
    path: path.join(buildPath, 'dist'),
    filename: 'js/[name].[chunkhash].js',
    chunkFilename: 'js/[name].[chunkhash].js',
    publicPath: '/',
  },

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

具有捆绑软件和供应商的简单入口点，我在其中添加了我希望它们包含在供应商文件中的软件包。

我应该如何使用webpack 4实现这一目标？

如果我删除通用块，这仍然有效，但是我不知道它是否是首选的方式。

我通过从入口点删除供应商并添加splitChunks进行了类似的尝试，但只生成了一个bundle.js文件。

splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          name: vendor
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },

Webpack 4 splitChunks和供应商捆绑包

0 个答案: