一 背景

最近在做一个项目，项目本身是用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 instanceslet 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  ]};