webpack4學習筆記（7）

提取分離css

處理效果：將所有入口chunk中引用的css，移動到獨立分離的css文件

方法一：ExtractTextPlugin插件

(1)安裝

npm install extract-text-webpack-plugin@next --save-dev

(2)配置config文件

引入插件：

const ExtractTextPlugin=require('extract-text-webpack-plugin');

Rules配置：

{

    test:/\.css$/,

    use:ExtractTextPlugin.extract({

        fallback:'style-loader',

        use:'css-loader'

    })

},

fallback:編譯後用什麼loader來提取css文件

Plugin配置：

new ExtractTextPlugin('./css/index.css') //打包後的文件路徑

方法二：mini-css-extract-plugin插件

(1)安裝

npm install mini-css-extract-plugin --save-dev

(2)配置config文件

引入插件：

const MiniCssPlugin=require('mini-css-extract-plugin');

Rules配置：

{

    test:/\.css$/,

    use:[MiniCssPlugin.loader,'css-loader']

},

Plugin配置：

new MiniCssPlugin({

    filename:'./css/index.css'

})

---

壓縮CSS及優化CSS

optimize-css-assets-webpack-plugin插件

(1)安裝

npm install optimize-css-assets-webpack-plugin --save-dev

(2)配置config文件

引入插件：

const OptimizeCssAssetsPlugin=require('optimize-css-assets-webpack-plugin');

Plugin設置：

new OptimizeCssAssetsPlugin({

    assetNameRegExp:/\.css$/g,         //正則表達式，用於匹配需要優化或壓縮的資源名

    cssProcessor:require('cssnano'),    //用於壓縮和優化css的處理器，默認值cssnano

    cssProcessorPluginOptions:{         //傳遞給cssProcessor的插件選項，默認{}
    
        presets:['default',{discardComments:{removeAll:true}}]  //discardComments去除註釋

    },

    canPrint:true //表示插件能夠在console中打印信息

})