kef-builder-buffet/webpack/cfg/chunks.js

buffet-builder构建工具

'use strict';

// 公共代码提取，可以抽取第三方库或者业务入口公共部分的代码
// 多入口实际就是 分别执行多个单入口 原理就是把多个入口共同的依赖都给定义成 一个新入口
// CommonsChunkPlugin 是把共用模块的代码从 bundles 分离出来合并到单独的文件（commons chunk）。
const webpack = require('webpack');
const glob = require('glob');
const CONST = require('../../utils/const');
const ROOT_PATH = CONST.ROOT_PATH;

module.exports = function (config) {
  // FIXME: 为了使用在线debug能力，必须单一入口文件，暂时关闭
  if (CONST.abcData.options.smartDebug) {
    return;
  }
  config.plugins = config.plugins || [];

  // page entry config
  let commonChunkFiles = [
    ROOT_PATH + '/src/common/js/*.js',
    // ROOT_PATH + '/src/common/js/object.assign.js',
    // react,react-dom 作为 vender，已经放到了web framework里面了，项目里面不进行打包
    // 'react',
    // 'react-dom',
  ];

  // config.entry['common/pre-common'] = commonChunkFiles;
  config.entry['common/pre-common'] = glob.sync(ROOT_PATH + '/src/common/js/*.js');

  // common chunk plugins config https://doc.webpack-china.org/plugins/commons-chunk-plugin/
  let options = {
    // 对应于上面的entry的key common为公共依赖 vender为第三方依赖 names: ['vender', 'common']
    names: [
      'common/pre-common'
    ],
    // filename: 默认是output.filename 或者 output.chunkFilename
    // chunks: 选择 chunks 的来源，默认所有的 入口chunk (entry chunk) 都会被选择
    // 创建 commons chunk 但不合并任何共用模块。随着 entry chunk 越来越多 这个配置保证没其它的模块会打包进 vendor chunk
    // 如何把业务代码本身相同的依赖自动打包呢，还是通过目录规范，放入common 或者此处设置minChunks非Infinity，这样即可实现所有公用模块都打到common
    minChunks: Infinity
  }
  let commonChunkPlugin = new webpack.optimize.CommonsChunkPlugin(options);
  config.plugins.push(commonChunkPlugin);
}