Question

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

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

组件（/ app / components /文件夹中用于两个或多个模块的所有js文件）
供应商（来自/ node_modules /和/ app / vendor /文件夹的所有js文件，用于两个或更多模块）
manifest（webpack js code，babel-polifill etc）
每个模块js文件

现在构建有问题：

let input = document.querySelector("input[placeholder='search text box']");

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

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

Answer 1

这里有很多问题！

我会回答供应商和清单问题，因为它们是相关的。

根据您的开发方式，苍蝇可能变化的频率以及您的最高优先级（构建时间？），有多种方法可以做到这一点。

你可以使用'dll'（https://webpack.js.org/plugins/dll-plugin/），当你知道你想要进入vendor / dll包的确切文件时你会知道供应商文件很少会改变。这种方法具有超快的构建时间，因为它只在需要时构建一次。

我通过显式拥有一个'vendor.js'文件来完成它的方式，该文件包含我已知的第三方软件包。然后我设置webpack以不同方式处理此文件。这样做的好处是供应商文件更明确，更容易更新，但构建速度会稍慢。

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

要创建清单，该方法与上述类似。您还需要使用common chunks plugin并添加：

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

我发现的最佳来源，如果您有时间通过它：https://survivejs.com/webpack/optimizing/separating-manifest/

我建议您在单独的问题中发布async和copy-paster问题吗？

Webpack构建配置

1 个答案: