一个背景最近在做一个项目。该项目本身是一个使用vue-cli创建的单页应用程序。由于项目扩展需要创建多个页面，所以需要针对不同的htmlPack创建css文件。于是开始研究extract-text-webpack-plugin这个插件。2插件介绍样式封装有两种方式，一种是使用style-loader自动将css代码放入生成的style标签中，插入到head标签中。另一种是使用extract-text-webpack-plugin插件将样式文件单独打包，打包后的输出文件由配置文件中的output属性指定。然后我们在入口HTML页面写一个link标签，用于导入打包后的样式文件。使用1个插件安装三个插件：#forwebpack3npminstall--save-devextract-text-webpack-plugin#forwebpack2npminstall--save-devextract-text-webpack-plugin@2.1.2#forwebpack1npminstall--save-devextract-text-webpack-plugin@1.0.12该插件用于在webpack.config.js中引入constExtractTextPlugin=require("extract-text-webpack-plugin");模块。exports={module:{rules:[{test:/\.css$/,use:ExtractTextPlugin.extract({fallback:"style-loader",//编译后用什么loader提取css文件use:"css-loader"//指的是编译文件需要什么样的loader，这里由于源文件是.css，所以选择css-loader})}]},plugins:[newExtractTextPlugin("styles.css"),]}四个APInewExtractTextPlugin([id:string],filename:string,[options])id这个插件实例的唯一标识符。（仅限高级用法；默认情况下，自动生成）filename结果文件的文件名。可能包含[name]、[id]和[contenthash]。[name]块的名称[id]块的id[contenthash]提取文件内容的哈希选项allChunks从所有其他块中提取（默认情况下它只从初始块中提取）([notExtractLoader],loader,[options]Createanextractloaderfromanexistingloader.notExtractLoader(optional)不提取css时应该使用的加载器（即当allChunks:falseinotherchunks）loader应该用于提取resource一个loader，转换为cssexportmodule。optionspublicPath覆盖了这个loader的publicPath设置。五个扩展这个实例其实有一个扩展功能，如果你有多个ExtractTextPlugins，你应该使用它。letExtractTextPlugin=require('extract-text-webpack-plugin');//多个提取实例letextractCSS=newExtractTextPlugin('stylesheets/[name].css');letextractLESS=newExtractTextPlugin('stylesheets/[name].less');module.exports={...模块：{loaders:[{test:/\.scss$/i,loader:extractCSS.extract(['css','sass'])},{test:/\.less$/i,加载器：extractLESS.extract(['css','less'])},...]},插件：[extractCSS,extractLESS]};
