webpack随笔（一）

在学习webpack中，根据官方文档引入clean-webpack-plugin插件后运行后报错，

const path=require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');



module.exports={
    entry:{
        app:'./src/index.js',
        print:'./src/print.js'
    },
    output:{
        filename:'[name].build.js',
        path:path.resolve(__dirname,'dist')

    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/\.(png|jpg|gif|svg)$/,
                use:[
                    'file-loader'
                ]
            },
            {
                test:/\.(woff|woff2|eot|ttf|otf)$/,
                use:[
                    'file-loader'
                ]
            }

        ]
    },
    plugins:[
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title:'这是插件'
        })
    ]
}

经过排查发现是因为webpack安装版本超过4.0而导致的。这里你可以使用cleanOnceBeforeBuildPatterns这重新书写构建该行为，`

new cleanOnceBeforeBuildPatterns({
	cleanOnceBeforeBuildPatterns: ['**/*', '!static-files*']
)

当然你可以重新书写导入语句来正确的构建webpack

const path=require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
//修改这里
const {CleanWebpackPlugin} = require('clean-webpack-plugin');



module.exports={
    entry:{
        app:'./src/index.js',
        print:'./src/print.js'
    },
    output:{
        filename:'[name].build.js',
        path:path.resolve(__dirname,'dist')

    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/\.(png|jpg|gif|svg)$/,
                use:[
                    'file-loader'
                ]
            },
            {
                test:/\.(woff|woff2|eot|ttf|otf)$/,
                use:[
                    'file-loader'
                ]
            }

        ]
    },
    plugins:[
    //修改这里
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title:'这是插件'
        })
    ]
}

这样的写原因是在于CleanWebpackPlugin选项的参数传入错误，如果和默认删除目录不同时才需要传入路径，且需要通过选项cleanOnceBeforeBuildPatterns来传入。