Webpack 如何在每次构建之前自动清理构建目录

如何在每次构建之前自动清理构建目录

• npm scipt结合rm rf清理
• clean-webpack-plugin

rm rf ./dist

这个方法其实并不优雅，可以用clean-webpack-plugin

package.json

{
    "script":"rm rf ./dist && webpack"
}

clean-webpack-plugin

clean-webpack-plugin默认会删除output指定的输出目录

安装

npm i clean-webpack-plugin@2.0.2 -D

配置plugin

'use strict';

const path = require('path');

// 将css commonjs 抽成css文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 压缩html,有几个入口就对应几个html
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 每次构建的时候自动清除之前的dist目录
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
    // 生产模式还是开发模式
    mode: 'production',
    // 入口 指定入口文件
    entry: {
        // app: './src/index.js',
        // search:'./src/search.js',
        reactComp: './src/react-comp.js'
    },
    // 出口 
    output: {
        // 指定输出目录
        path: path.join(__dirname, 'dist'),
        filename: '[name]_[chunkhash:8].js'
    },
    // 配置loader
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // 'style-loader', // 再将样式插入到style标签中
                    'css-loader' // 将css转换成commonjs
                ]
            },
            {
                test: /.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // 'style-loader', // 再将样式插入到style标签中
                    'css-loader', // 将css转换成commonjs
                    'less-loader' // 将less文件转换成css文件
                ]
            },
            {
                test: /.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader:'file-loader',
                        // 图片指纹
                        options:{
                            name:'[name]_[hash:8].[ext]'
                        }
                        // loader: 'url-loader',
                        // options: {
                        //     limit: 40 * 1024 // 40k
                        // }
                    }
                ]
            },
            {
                test: /.(woff|woff2|eot|ttf|otf|otf)$/,
                use: [
                    {
                        loader:'file-loader',
                        options:{
                            name:'[name]_[hash:8].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins:[
        // css使用contenthash，避免css没变js变化的时候，css的hash值页随着发布一起变化
        new MiniCssExtractPlugin({
            filename:'[name]_[contenthash:8].css',
        }),
        // 压缩css文件
        new OptimizeCssAssetsPlugin({
            assetNameRegExp:/.css$/g,
            // css预处理器
            cssProcessor:require('cssnano')
        }),
        // 压缩html
        new HtmlWebpackPlugin({
            // html模板所在路径
            template:path.join(__dirname,'src/index.html'),
            // 指定输出文件名称
            filename:'reactComp.html',
            // 使用哪个chunk生成html页面
            chunks:['reactComp'],
            // 为true时，jscss会自动注入此html中来
            inject:true,
            // 处理换行，空格，注释
            minify:{
                html5:true,
                collapseWhitespace:true,
                preserveLineBreaks:false,
                minifyCSS:true,
                minifyJS:true,
                removeComments:false
            }
        }),
        // 自动清除dist
        new CleanWebpackPlugin()
    ]
}

再次运行npm run build查看效果