extract-text-webpack-plugin

使用

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

它会将所有 required 的 *.css 模块抽取到分离的 CSS 文件。 所以你的样式将不会内联到 JS bundle，而是在一个单独的 CSS 文件。如果你的样式文件很大，这样会提速，因为 CSS bundle 和 JS bundle 是平行加载的

优势	劣势
更少的 style tags	额外的 http 请求
css SourceMap (通过 devtool: "source-map" 和 extract-text-webpack-plugin?sourceMap)	更长的编译时间
css 请求和 js 平行	？？
css 拥有自己的 cache	不能使用 Hot Module Replacement
rumtime 更快 （更少的code 和 dom 操作）	...

Option

new ExtractTextPlugin(options: filename | object)

name	type	description
id	{String}	这个插件实例的唯一的 id (高级功能才需要使用到，默认会自己产生一个)
filename	`{String	Function}`	生成文件的文件名，可以包含 [name], [id], [contenthash]
allChunks	{Boolean}	是否抽取其他附加的 chunks 里的style (默认只会抽取原始的 chunks, 当使用 CommonsChunkPlugin 时, 在 commons chunk 里面也有通过 ExtractTextPlugin.extract 抽取的 chunks, allChunks 必须设置成 true)
disalbe	{Boolean}	disabled 插件
ignoreOrder	{Boolean}	禁用 order 检查（在 cssModule 情况下非常有用）， 默认值为 false

• [name] chunk 的名字
• [id]
• [contenthash] 被抽出来文件内容的 hash 值
• [:contenthash::] , 你可以选择性配置

ExtractTextPlugin 对每一个入口文件都会产生一个文件，当你使用多个入口时候必须使用 [name], [id], 或者 [contenthash]

extract

ExtractTextPlugin.extract(options: loader | object)

在已经存在的一个 loader, 创建一个新的 loader。支持的 loader 类型 { loader: [name]-loader -> {String}, options: {} -> {Object} }。

Name	Type	Description
options.use	{String}/{Array}/{Object}	把源文件转成 css 输出模块 (必传)
options.fallback	{String}/{Array}/{Object}	当 css 文件未被抽出使用的 loader （比如 ） (比如在有额外产生的 chunks 而 allChunks: false 时)
options.publicPath	{String}	为当前 loader 改写 publicPath

多实例

在实例上也有个 extract function。如果你有1个以上的 ExtractTextPlugin 的实例，你应该使用实例上的 extract。

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

// Create multiple instances
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');

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

抽取 Less 或者 Sass

配置是相同的, 根据需求使用 sass-loader 取代 less-loader。

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css')
    //if you want to pass in options, you can do so:
    //new ExtractTextPlugin({
    //  filename: 'style.css'
    //})
  ]
}

url() Resolving

如果你运行 webpack 发现 urls resolve 不对。你可以使用 options 扩展 loader 功能。 url: false 使得你的路径 resolve 的时候不会发生任何变化。

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
                loader: 'css-loader',
                options: {
                    // If you are having trouble with urls not resolving add this setting.
                    // See https://github.com/webpack-contrib/css-loader#url
                    url: false,
                    minimize: true,
                    sourceMap: true
                }
            }, 
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: true
                }
            }
          ]
        })
      }
    ]
  }
}

改变文件名

filename 参数可以是 Function。通过传入 getPath 去处理像 css/[name].css 的格式，返回一个真正的文件名， css/js/a.css。你可以替换 css/js 为 css，这样你可以得到一个新的路径 css/a.css。

entry: {
  'js/a': "./a"
},
plugins: [
  new ExtractTextPlugin({
    filename:  (getPath) => {
      return getPath('css/[name].css').replace('css/js', 'css');
    },
    allChunks: true
  })
]