Webpack 构建配置

Question

我用我的项目的简单示例创建了 git repo https://github.com/paveleremin/webpack-build

问题是：如何用多个块构建它，例如：

1. 组件（/app/components/ 文件夹中用于两个或多个模块的所有 js 文件）
2. vendors（来自 /node_modules/ 和 /app/vendor/ 文件夹中的所有 js 文件，用于两个或多个模块）
3. 清单（webpack js 代码、babel-polifill 等）
4. 每个模块的 js 文件

现在构建有问题：

new webpack.optimize.CommonsChunkPlugin({
    async: 'components',
    children: true,
    minChunks({ resource }, count) {
        return resource && resource.includes(paths.components) && count > 1;
    }
}),

new webpack.optimize.CommonsChunkPlugin({
    async: 'vendors',
    children: true,
    minChunks({ resource }, count) {
        console.log(resource, count);
        return resource && (resource.includes(paths.nodeModules) || resource.includes(paths.vendor)) && count > 1;
    }
}),

new webpack.optimize.CommonsChunkPlugin({
    name: 'manifest',
}),

1. scUsedTwice 的来源是复制粘贴，并且存在于 login.js 和 dashboard.js 中 - 已解决
2. 所有供应商都在 app.js 中

我自己尝试过，但是异步模块有问题。

Answer 1

这里有很多问题！

我将回答 vendor 和 ma​​nifest 问题，因为它们是相关的。

有多种方法可以做到这一点，具体取决于您的开发方式、苍蝇可能改变的频率以及您的最高优先级（构建时间？）。

您可以使用“dll”（https://webpack.js.org/plugins/dll-plugin/），当您确切知道要放入供应商/dll 包中的文件并且您知道供应商文件很少更改时，这很有用。此方法的构建时间非常快，因为它只在需要时构建一次。

我通过明确拥有一个包含我已知的第 3 方包的“vendor.js”文件来完成它的方式。然后我设置 webpack 以区别对待这个文件。这样做的好处是供应商文件更明确且更易于更新，但构建会稍微慢一些。

  entry: {
    app: [`${SRC}/client-entry.js`],
    vendor: [`${SRC}/vendor.js`]
  }
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({ names: ['vendor'], minChunks: Infinity }),
  ]

创建Manifest，方法同上。您还需要使用common chunks plugin 并添加：

   new webpack.optimize.CommonsChunkPlugin({ name: "manifest", minChunks: Infinity }

我找到的最好的资源是：https://survivejs.com/webpack/optimizing/separating-manifest/

我可以建议您在单独的问题中发布异步和复制粘贴问题吗？