ExtractTextWebpackPlugin

安装

npm install --save-dev extract-text-webpack-plugin

使用

:警告: 如果使用针对 webpack 1 的版本, 请看分支 webpack-1 的文档.

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"),
  ]
}

它会将所有的入口chunk (entry chunks) 中的 require("style.css") 移动到分开的 css 文件。因此，你的样式不再内联到 javascript 里面，但会放到一个单独的 css 包文件 (styles.css)当中。如果你的样式文件大小较大，这会更快，因为样式文件会跟 javascript 包并行加载。

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

配置

new ExtractTextPlugin(options: filename | object)

名称	类型	描述
`id`	`{String}`	此插件实例的唯一id。（仅限高级用途，默认情况下自动生成）
`filename`	`{String}`	(必填) 生成文件的文件名。会包含 `[name]`, `[id]` 和 `[contenthash]`
`options.allChunks`	`{Boolean}`	向所有额外的 chunk 提取（默认只提取初始加载模块）
`options.disable`	`{Boolean}`	禁用插件
`options.ignoreOrder`	`{Boolean}`	禁用顺序检查 (对 CSS Modules 有用!), 默认 `false`

[name] chunk 的名称
[id] chunk 的数量
[contenthash] 提取文件根据内容生成的哈希

:警告: ExtractTextPlugin 对 每个入口 chunk 都生成对应的一个文件, 所以当你配置多个入口 chunk 的时候，你必须使用 [name], [id] or [contenthash].

`#extract`

ExtractTextPlugin.extract(options: loader | object)

从一个已存在的加载器 (loader) 中创建一个提取 (extracting) 加载器。支持这些加载器类型： { loader: [name]-loader -> {String}, options: {} -> {Object} }.

名称	类型	描述
`options.use`	`{String}`/`{Object}`	(必填), 加载器 (`Loader`), 被用于将资源转换成一个输出的 `CSS` 模块
`options.fallback`	`{String}`/`{Object}`	加载器 (例如 `'style-loader'`), 应用于当 css 没有被提取(也就是一个额外的 chunk，当 `allChunks: false`)
`options.publicPath`	`{String}`	对加载器的 `publicPath` 配置重写

多个实例

这也是一个提取 (extract) 函数的实例。如果你有多于一个 ExtractTextPlugin 插件你应使用这种办法。

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

// 多个提取实例
const extractCSS = new ExtractTextPlugin('stylesheets/[name].css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name].less');

module.exports = {
  module: {
    use: [
      {
        test: /\.css$/,
        use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
      },
      {
        test: /\.html$/i,
        use: extractLESS.extract([ 'css-loader', 'less-loader' ])
      },
    ]
  },
  plugins: [
    extractCSS,
    extractLESS
  ]
};