extract-text-webpack-plugin 实现webpack打包分离css
webpack的打包机制，webpack本来只能打包处理js文件，但是通过强大的loader之后，可以打包处理各种类型的文件，默认都打包到一个bundle.js里面了。
为了把css从js中抽离处理就用到了extract-text-webpack-plugin
用法：
npm install extract-text-webpack-plugin --save-dev
extractTextWebpackPlugin参数说明：
filename:生成文件的文件名，可以包含[name] [id] [contenthash]
allChunks:当为false的时候，之后提取初始化的时候引入的css，当chunks为true时，会把异步引入的css也提取出来。
ExtractTextWebpackPlugin.extract基本参数说明：
use:指需要什么样的loader去编译文件
fallback:这里表示不提取的时候，使用什么样的配置来处理css
publicfile:用来覆盖项目的路径，生成该css文件的文件路径
在webpack4.0中建议使用mini-css-extract-plugin：
跟extract-text-webpack-plugin:
1 异步加载
2 没有重复的编译
3 更容易使用
4 特定于css
使用
npm install css-extract-plugin --save-dev
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports={
plugins:[
...
new MiniCssExtractPlugin ({
filename: '[name].css',
chunkFilename: '[id].css',
ignoreOrder: false,
})
],
module:{
rules:[
...
{
test:/\.css$/i,
use:[
{
loader:MiniCssExtractPlugin.loader
options:{
esModules:true
}
},
]
},
'css-loader''
]
}
}