正文
webpack8--删除dist目录，压缩分离后的CSS
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、删除dist目录
有时候我们需要在打包文件之前删除之前打包的dist目录，如何做？
1.安装new cleanWebpackPlugin(['dist'])
npm install clean-webpack-plugin --D
2.在webpack.config.js中引入该模块
const cleanWebpackPlugin = require('clean-webpack-plugin');
3.在webpack.config.js中的plugins进行配置
plugins: [
new cleanWebpackPlugin(['dist']) //清理dist文件夹
]
4.执行 npm run start
二、压缩分离后的CSS1.安装 optimize-css-assets-webpack-plugin 和 cssnano
npm i optimize-css-assets-webpack-plugin cssnano -D
2.在webpack.config.js中引入该模块
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
3.在webpack.config.js中的plugins添加如下配置
plugins: [
new OptimizeCssAssetsPlugin({
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
},
canPrint: true
})
]
4.执行 npm run start
npm i optimize-css-assets-webpack-plugin cssnano -D
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
plugins: [
new OptimizeCssAssetsPlugin({
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
},
canPrint: true
})
]
我们可以看到此时的CSS代码是已经压缩好了，如下图：
感谢阅读~~
