一 背景
近来在做一个项目，项目自身是用vue-cli建立的单页面运用，因为项目扩大须要建立多页面，所以须要对差别的html离别举行css文件打包。因而最先研讨extract-text-webpack-plugin插件。
二 插件引见
打包款式有两种要领，一种是运用style-loader自动将css代码放到天生的style标签中，而且插进去到head标签里。另一种就是运用extract-text-webpack-plugin插件，将款式文件零丁打包，打包输出的文件由配置文件中的output属性指定。然后我们在进口HTML页面写个link标签引入这个打包后的款式文件。
三 插件运用
1 插件装置：

# for webpack 3 
npm install --save-dev extract-text-webpack-plugin
# for webpack 2 
npm install --save-dev extract-text-webpack-plugin@2.1.2
# for webpack 1 
npm install --save-dev extract-text-webpack-plugin@1.0.1

2 插件运用
在webpack.config.js中引入

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader", // 编译后用什么loader来提取css文件
          use: "css-loader" // 指须要什么样的loader去编译文件,这里因为源文件是.css所以挑选css-loader
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

四 API

new ExtractTextPlugin([id: string], filename: string, [options])

1. id此插件实例的唯一标识。（仅限高等用法;默许情况下，自动天生）
2. filename效果文件的文件名。能够包括[name]，[id]和[contenthash]。
   [name] 块的称号
   [id] 块的标识
   [contenthash] 提取文件内容的哈希值
3. options

• allChunks 从一切其他块中提取（默许情况下，它仅从初始块中提取）
• disable 禁用插件

ExtractTextPlugin.extract([notExtractLoader], loader, [options]
从现有加载器建立提取加载器。

1. notExtractLoader（可选）在未提取css时应运用的加载顺序（即在其他块中时allChunks: false）
2. loader 应当用于将资本转换为css导出模块的加载器。
3. options
   publicPath掩盖publicPath此加载顺序的设置。

五 扩大
该实例实在另有一个扩大函数。假如你有多个ExtractTextPlugin，你应当运用它。

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

// multiple extract instances
let extractCSS = new ExtractTextPlugin('stylesheets/[name].css');
let extractLESS = new ExtractTextPlugin('stylesheets/[name].less');

module.exports = {
  ...
  module: {
    loaders: [
      {test: /\.scss$/i, loader: extractCSS.extract(['css','sass'])},
      {test: /\.less$/i, loader: extractLESS.extract(['css','less'])},
      ...
    ]
  },
  plugins: [
    extractCSS,
    extractLESS
  ]
};