webpack5常用插件使用问题小结，

webpack5常用插件使用问题小结，

目录

• webpack5常用插件使用
• 1. CleanWebpackPlugin
• 2. HtmlWebpackPlugin
• 3. DefinePlugin
• 4.CopyWebpackPlugin

webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换、打包或包裹任何资源。

webpack5常用插件使用

1. CleanWebpackPlugin

问题：每次打包完都需要手动删除掉dist文件目录，使用CleanWebpackPlugin就可自动清除dist目录。作用：自动清除dist文件目录

1. 安装 npm install clean-webpack-plugin -D
	2. 解构 
		 插件大都是封装成一个class的，也可以是函数，然后到时候去调用的hook回调
		 因为它导出的是一个对象，所以要通过解构取出来一个类。
		 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
	4. 配置  plugins:[
		  	  new CleanWebpackPlugin(),
		    ]

2. HtmlWebpackPlugin

问题：帮助我们打包的时候生成一个html入口文件，还可通过options设置html模板和标题。

1. 安装 npm install html-webpack-plugin -D
2. 引用 const HtmlWebpackPlugin = require('html-webpack-plugin');
3. 配置模板和标题
	  plugins:[
		new HtmlWebpackPlugin({
	      template: './public/index.html',
	      title:"哈哈哈哈哈",
	    }),
	  ]

3. DefinePlugin

问题：帮助我们设置全局基础路径。允许创建一个在编译时可配置的全局常

1. 解构，webpack5自带有，导出的是一个对象解构好直接引用。
const { DefinePlugin } = require('webpack')
2. 配置模板的基础路径
	  plugins:[
 		new DefinePlugin({ // 设置基础路径
	     BASE_URL: "'./'"
	    }),
	  ] 

4.CopyWebpackPlugin

问题：打包的时候有些文件不需要打包生成，直接复制到打包好的文件目录中。复制某个文件或整个文件夹到生成目录中

1. 安装 npm install copy-webpack-plugin -D
2. 引用 const CopyWebpackPlugin= require('copy-webpack-plugin');
3. 配置模板的基础路径
	  plugins:[
 	    new CopyWebpackPlugin({ //复制文件
	      patterns:[
	        {
	          from:'public',
	          to:'./',
	          globOptions:{
	            ignore:[
	              '**/index.html'
	            ]
	          }
	        }
	      ]
	    })
	  ] 

到此这篇关于webpack5 常用插件使用的文章就介绍到这了,更多相关webpack5 插件使用内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程！

您可能感兴趣的文章:

• JavaScript webpack5配置及使用基本介绍
• 使用webpack5从0到1搭建一个react项目的实现步骤
• webpack4升级到webpack5的实战经验总结
• Webpack5正式发布,有哪些新特性
• webpack5 联邦模块介绍详解