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, //       
		})
	]

}

クリア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
  ]
}

ご指摘を歓迎します.一緒に勉強について話し合いましょう.