11. 重学webpack——copy-webpack-plugin、clean-webpack-plugin和webpack4与5启动脚本区别

原创

wx5c04c8a88fd20 2021-09-02 10:37:38 ©著作权

文章标签 clean webpack plugin copy serve 文章分类 Webpack 前端开发

©著作权归作者所有：来自51CTO博客作者wx5c04c8a88fd20的原创作品，请联系作者获取转载授权，否则将追究法律责任

推荐：《webpack学完这些就够了》

《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。

以下是本节正文：

1.CleanWebpackPlugin

clean-webpack-plugin是一个插件，会在每次打包前，先清空制定目录下的文件，然后再打包

plugins:[
    new CleanWebpackPlugin({
        verbose: true,//是否在console中打印日志，true为是,默认为false
        dry: false,//false为默认值，代表删除，true代表模拟删除，其实是不删除  
        cleanStaleWebpackAssets: true, // 在重新构建前删除所有未使用的webpack资产，默认true
        protectWebpackAssets: true, // 保护当前的webpack资产，默认true
		cleanOnceBeforeBuildPatterns: ['**/*'], // 在Webpack编译之前删除一次文件，不包括在重建中（监视模式），默认：['** / *']，如果是空数组，表示禁用
     // cleanAfterEveryBuildPatterns // 在每个与此模式匹配的构建（包括监视模式）后删除文件，用于不是由Webpack直接创建的文件，默认：禁用
        dangerouslyAllowCleanPatternsOutsideProject // 需要明确设置干选项，默认值：false
    })
]

2.CopyWebpackPlugin

CopyWebpackPlugin用于拷贝资源

new CopyWebpackPlugin(
    {
        patterns:[
            {
                from: path.resolve(__dirname, './src/a.js'), // 将资源'./src/a.js'拷贝到'./'
                to: './'
            }
        ]
    }
),