webpack7--css壓縮成單獨的css文件

先看下下面的圖片：

我們可以看到，通過Webpack打包后，默認CSS是通過 內部樣式表 寫入的。我們如何把壓縮后的CSS單獨導出為CSS 呢？

 

1.安裝 extract-text-webpack-plugin@next

npm i extract-text-webpack-plugin@next -D

 

2.在webpack.config.js中引入該模塊

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

 

3.在webpack.config.js 中的 plugins 中加入new  ExtractTextWebpackPlugin('css提取出去的路徑') 

plugins: [
    new ExtractTextWebpackPlugin('/css/demo.css') 
]

 

4. 修改 webpack.config.js 中的 rules 針對css的設置，如下所示

module: {
    rules: [{
        test: /\.css$/,
        use:ExtractTextWebpackPlugin.extract({
            fallback:'style-loader',
            use:['css-loader']
        })
    }]
}

 

5.運行  npm run start，最后結果如下：

可以看到 dist 目錄下面生成了一個demo.css

 

感謝閱讀~~