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

 

二、压缩分离后的CSS

1.安装 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

我们可以看到此时的CSS代码是已经压缩好了,如下图:

 

感谢阅读~~

 

posted @ 2018-11-11 18:35  前端[色色]  阅读(1266)  评论(0编辑  收藏  举报