Webpack插件中CommonsChunkPlugin 与 ExtractTextPlugin

[pfan123]

CommonsChunkPlugin

CommonsChunkPlugin 插件，是一个可选的用于建立一个独立文件(又称作 chunk)的功能，这个文件包括多个入口 chunk 的公共模块。通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存起来到缓存中供后续使用。这个带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。

CommonsChunkPlugin配置

{
  name: string, // or
  names: string[],
  // 这是 common chunk 的名称。已经存在的 chunk 可以通过传入一个已存在的 chunk 名称而被选择。
  // 如果一个字符串数组被传入，这相当于插件针对每个 chunk 名被多次调用
  // 如果该选项被忽略，同时 `options.async` 或者 `options.children` 被设置，所有的 chunk 都会被使用，否则 `options.filename` 会用于作为 chunk 名。

  filename: string,
  // common chunk 的文件名模板。可以包含与 `output.filename` 相同的占位符。
  // 如果被忽略，原本的文件名不会被修改(通常是 `output.filename` 或者 `output.chunkFilename`)

  minChunks: number|Infinity|function(module, count) -> boolean,
  // 在传入  公共chunk(commons chunk) 之前所需要包含的最少数量的 chunks 。
  // 数量必须大于等于2，或者少于等于 chunks的数量
  // 传入 `Infinity` 会马上生成 公共chunk，但里面没有模块。
  // 你可以传入一个 `function` ，以添加定制的逻辑（默认是 chunk 的数量）

  chunks: string[],
  // 通过 chunk name 去选择 chunks 的来源。chunk 必须是  公共chunk 的子模块。
  // 如果被忽略，所有的，所有的 入口chunk (entry chunk) 都会被选择。


  children: boolean,
  // 如果设置为 `true`，所有  公共chunk 的子模块都会被选择

  async: boolean|string,
  // 如果设置为 `true`，一个异步的  公共chunk 会作为 `options.name` 的子模块，和 `options.chunks` 的兄弟模块被创建。
  // 它会与 `options.chunks` 并行被加载。可以通过提供想要的字符串，
  // 而不是 `true` 来对输出的文件进行更换名称。

  minSize: number,
  // 在 公共chunk 被创建立之前，所有 公共模块 (common module) 的最少大小。
}

ExtractTextWebpackPlugin

ExtractTextWebpackPlugin会将所有的入口 chunk(entry chunks)中引用的 *.css，移动到独立分离的 CSS 文件。因此，你的样式将不再内嵌到 JS bundle 中，而是会放到一个单独的 CSS 文件（即 styles.css）当中。 如果你的样式文件大小较大，这会做更快提前加载，因为 CSS bundle 会跟 JS bundle 并行加载。

优点	缺点
更少 style 标签 (旧版本的 IE 浏览器有限制)	额外的 HTTP 请求
CSS SourceMap (使用 devtool: "source-map" 和 extract-text-webpack-plugin?sourceMap 配置)	更长的编译时间
CSS 请求并行	没有运行时(runtime)的公共路径修改
CSS 单独缓存	没有热替换
更快的浏览器运行时(runtime) (更少代码和 DOM 操作)	……

ExtractTextWebpackPlugin用法

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

更多详情，参考

CommonsChunkPlugin 与 ExtractTextWebpackPlugin 同时使用问题

实例：

  module.exports.module.rules =  (module.exports.module.rules || []).concat([
      //ExtractTextPlugin 与预览输出css不能同时存在
      {
        test: /\.(css|scss)$/,
        //https://github.com/webpack-contrib/extract-text-webpack-plugin
        use: ExtractTextPlugin.extract({
             fallback: 'style-loader',
             use: ['css-loader', "postcss-loader", "sass-loader"]
        })        
        ,
        include: [
          APP_SASS
        ]        
      }
  ])
  
  module.exports.plugins = (module.exports.plugins || []).concat([
	  new ExtractTextPlugin( './css/[name].css'),
	  new webpack.optimize.CommonsChunkPlugin({
	      name: 'vendors', // 将公共模块提取，生成名为`vendors`的chunk
	      chunks: Object.keys(entries),
	      // minChunks: Infinity //传入 `Infinity` 会马上生成 公共chunk，但里面没有模块
	      minChunks: Object.keys(entries).length // 会提取所有entry共同依赖的模块
	  })  
  ])	  

当在入口 entry 脚本中，require('xxx.css')或者import style from 'xxx.css'，会导致 'CommonsChunkPlugin' 提取公共模块，页面脚本报错，猜测提取公共样式模块引起报错，而将minChunks 设置不为Object.keys(entries).length或Infinity会马上生成 公共chunk里面没有模块，没有根本上面分离提取公共模块。