如何在CommonsChunkPlugin配置中避免重复构建vendor入口？

嘿，这个需求完全可行！我来给你梳理两个靠谱的方案，帮你实现只构建一次vendor、后续仅打包app的目标：

这个组合就是专门用来预编译不常变动的依赖（比如你的react、react-dom这些），编译一次后就能反复复用，完美匹配你的需求。

步骤如下：

1. 创建单独的webpack配置文件（比如webpack.vendor.js），专门用来打包vendor：

const webpack = require('webpack');

module.exports = {
  entry: {
    vendor: ["react", "react-dom", "prop-types"]
  },
  output: {
    filename: '[name].dll.js',
    path: __dirname + '/dist',
    // 指定全局变量名，后面主配置会用到
    library: '[name]_library'
  },
  plugins: [
    new webpack.DllPlugin({
      // 和output.library保持一致
      name: '[name]_library',
      // 生成manifest文件，用来告诉主配置哪些模块已经预编译完成
      path: __dirname + '/dist/[name]-manifest.json'
    })
  ]
};

2. 第一次运行命令打包vendor：

webpack --config webpack.vendor.js

这会在dist目录生成vendor.dll.js和vendor-manifest.json，之后除非你要更新vendor里的依赖，否则再也不用跑这个命令了。

3. 修改你的主webpack配置文件（webpack.config.js），添加DllReferencePlugin自动排除vendor模块：

const webpack = require('webpack');

module.exports = {
  entry: {
    app: "./entry"
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  },
  plugins: [
    new webpack.DllReferencePlugin({
      // 引入刚才生成的manifest文件
      manifest: require('./dist/vendor-manifest.json')
    })
  ]
};

4. 后续只需要打包app即可：

webpack --config webpack.config.js

这时webpack会自动识别哪些模块已经在vendor.dll.js里，不会再把它们打包进app.bundle.js，构建速度会快很多。

如果你不想切换到DllPlugin，也可以通过环境变量来控制是否打包vendor，步骤如下：

1. 修改你的webpack配置文件，根据环境变量动态调整entry和plugins：

const webpack = require('webpack');
const isVendorBuild = process.env.NODE_ENV === 'vendor';

module.exports = {
  entry: isVendorBuild 
    ? { vendor: ["react", "react-dom", "prop-types"] }
    : { app: "./entry" },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  },
  plugins: [
    ...(isVendorBuild ? [
      new webpack.optimize.CommonsChunkPlugin({ 
        name: "vendor", 
        minChunks: Infinity 
      })
    ] : [])
  ]
};

2. 第一次打包vendor：

NODE_ENV=vendor webpack

3. 后续打包app：

webpack

不过这个方案有个小提醒：webpack不会自动排除vendor里的模块，你需要确保在HTML页面中先引入vendor.bundle.js，再引入app.bundle.js，否则会出现模块找不到的错误。

不管用哪个方案，都要记得在HTML文件里按顺序引入JS文件，比如：

<script src="./dist/vendor.dll.js"></script> <!-- 或者vendor.bundle.js -->
<script src="./dist/app.bundle.js"></script>

内容的提问来源于stack exchange，提问作者Torsten