webpack CommonsChunkPlugin

最近的项目使用webpack 做依赖管理和打包， 为了尽量重用代码， 使用了CommonsChunkPlugin插件来分离共用代码。

项目后端是Asp.net MVC， 为了尽量符合框架的使用理念， 前端代码的构建以编译ES6 和 Sass 文件（不压缩）为目标。为了让后端可以直接运行项目， 编译出来的文件也放在了仓库中。 (这是引出问题的原因，如果构建优化流程全在前端做的话就没有下面的问题了)

一开始的webpack配置是这样的 

let commonsPlugin = new webpack.optimize.CommonsChunkPlugin({
    filename: "common.js"
});


let plugins = [
    commonsPlugin,
];

module.exports = {
    plugins: plugins,
    // ...
}

这样的用法， webpack会在每次打包的时候找出所有entry 所共用的部分抽取出来成为 common.js 文件。

但是在之后的多人合作开发中遇到了很多次merge conflict 的情况， 因为不同的entry文件的修改都有可能导致common.js内容的变化， 进而使得webpack 的 import 引用id 变化， 然后影响到其他所有的entry 输出文件。 冲突的情况基本会影响到所有的输出文件， 处理起来很是麻烦。

后来重新读了一遍CommonsChunkPlugin 找到了一个不错的解决方案， 简单的说就是显示申明公共依赖而不用webpack来自动计算。

这样修改后， 各个entry的修改只会影响到自己的输出文件，不会影响到全部的输出。 唯一需要注意的是公共entry文件的改动需要通知其他人先提交代码做好同步， 然后再做改动（而且如果只是修改依赖的内容并不会影响到其他文件， 之后添加或者减少依赖才会有影响）， 可以最大限度消除conflict

参考url : https://webpack.js.org/plugins/commons-chunk-plugin/#explicit-vendor-chunk

代码稍作修改：

let commonsPlugin = new webpack.optimize.CommonsChunkPlugin({
    // reference: https://github.com/webpack/webpack/tree/master/examples/two-explicit-vendor-chunks
    // to make the vendor static, reduce the chance of conflicts.
    names: ['vendor'],
    minChunks: Infinity
});

let plugins = [
    commonsPlugin,
];

module.exports = {
    plugins: plugins,
    entry: {
        vendor: ['./common/app.js'],  // 此处管理所有公共依赖
        shared_official: "./views/shared/official-site.js",
        home_experimental: "./views/home/experimental.js",
        home_index: "./views/home/index.js",
        course_smallstars: "./views/course/smallstars.js",
        course_trailblazers: "./views/course/trailblazers.js",
        course_highflyers: "./views/course/highflyers.js"
    }
}

修改完之后就可以让输出文件愉快的和后端框架一起玩耍了。

（完）