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

 

感谢阅读~~