webpack 常用小插件

cleanWebpackPlugin

清除webpack生成的文件，默认删除output中路径的文件。
一般我们都会在输出文件的名称中加上哈希，但是这样就导致了，每次打包后还存留之前打包的文件，因此我们就需要这个插件清除之前生成的文件，只保留最新的打包文件
安装npm install clean-webpack-plugin -D

	// 引入
	const { CleanWebpackPlugin } = require （' clean-webpack-plugin '） ; 
	// 使用
	module.exports = {
	plugins: [
			new CleanWebpackPlugin(),// 一般情况这样就可以使用
		]
	}
	// 配置项 new CleanWebpackPlugin(options)
	options = {
		dry: true,// 默认false， 设置成true时，不会清除原始文件
		verbose: true, // 默认为false，在控制台打印日志； 当dry为true时，默认为true打印
		// 打印的log如下
			//   lean-webpack-plugin: removed dist/a.42fa09.js
    		//   clean-webpack-plugin: removed dist/index.42fa09.js
    		//   clean-webpack-plugin: removed dist/index.html
    		//   clean-webpack-plugin: removed dist/main.css
    	cleanStaleWebpackAssets: false, // 默认值：true 在重建时自动删除所有未使用的webpack资产
    	protectWebpackAssets ：false ，//  默认值：true  不允许删除当前的webpack资产
	}

copy-webpack-plugin

将一些文件复制到打包后的文件中；
安装cnpm i copy-webpack-plugin
可参考链接:
copy-webpack-plugin npm
copy-webpack-plugin webpack

	// 引入
	const copyWebpackPlugin = require （' copy-webpack-plugin '） ; 
	// 使用
	module.exports = {
		new copyWebpackPlugin({
			patterns:[
        		{from:'src/iu.jpeg',to:'./dist'}, // 复制到出口dist文件下的一个新建的dist文件内
        		{from:'src/iu.jpeg',to:''}, // 默认出口dist文件下
      		]
		})
	}
	

webpack内置插件 BannerPlugin

为文件头部添加 banner，html文件除外。
由于是webpack内部插件，因此只需在文件引入webpack即可

// 引入
const webpack = require('webpack')
module.exports = {
	plugins: [
		// 使用
		new webpack.BannerPlugin({
			banner: 'made by clearNew',
      		raw: false, // 如果值为 true，将直出，不会被作为注释
      		test: string | RegExp | Array,
      		entryOnly: true, // 如果值为 true，将只在入口 chunks 文件中添加
      		include: string | RegExp | Array, // 匹配包含的文件
     		exclude: string | RegExp | Array, // 排除某些文件
		})
	]

}

清除 console.log

一般打包后的文件中我们不希望有console.log等测试内容，那么就需要一些配置或使用指定插件

1、在处理js的插件中清除console.log

npm i terser-webpack-plugin -D

const TerserJSPlugin = require('terser-webpack-plugin')

optimization: { // 优化项配置
    	minimizer: [
      		new TerserJSPlugin({
                terserOptions: {
                    compress: {
                      pure_funcs: ["console.log"]
                    }
                  }
              }), 
			],
      },

2、使用babel-plugin-transform-remove-console

cnpm i babel-plugin-transform-remove-console -D

	// 在webpack.config.js中配置
	{
		test: /\.js$/,
		use: [{
			loader: "babel-loader",
            options: {
                   presets: ["@babel/preset-env"],
                   plugins: [
                       ["transform-remove-console"]
                    ],
                    },
                }],
       exclude: "/node_module/", // 排除node_module中的js文件
            },
  // 或在babel.config.js中配置
  const prodPlugins = []
// 如果是发布模式则启用的插件
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ...prodPlugins
  ]
}

欢迎指正，一起讨论学习