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