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''
　　]
}
}

参考:https://www.npmjs.com/package/mini-css-extract-plugin 

 https://www.npmjs.com/package/extract-text-webpack-plugin