webpack随笔（一）

最新推荐文章于 2025-12-27 19:25:02 发布

原创最新推荐文章于 2025-12-27 19:25:02 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #plugin

博主在学习Webpack时，引入clean-webpack-plugin插件运行报错，排查发现是Webpack安装版本超4.0所致。可使用cleanOnceBeforeBuildPatterns重新书写构建行为，也可重写导入语句。报错原因是CleanWebpackPlugin选项参数传入错误。

在学习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:'这是插件'
        })
    ]
}