webpack5 常用插件使用

webpack5常用插件使用

  • [1. CleanWebpackPlugin](#1. CleanWebpackPlugin)
  • [2. HtmlWebpackPlugin](#2. HtmlWebpackPlugin)
  • [3. DefinePlugin](#3. DefinePlugin)
  • 4.CopyWebpackPlugin

1. CleanWebpackPlugin

复制代码
问题:每次打包完都需要手动删除掉dist文件目录,使用CleanWebpackPlugin就可自动清除dist目录。作用:自动清除dist文件目录
javascript 复制代码
	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模板和标题。
javascript 复制代码
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

复制代码
问题:帮助我们设置全局基础路径。允许创建一个在编译时可配置的全局常
javascript 复制代码
1. 解构,webpack5自带有,导出的是一个对象解构好直接引用。
const { DefinePlugin } = require('webpack')
2. 配置模板的基础路径
	  plugins:[
 		new DefinePlugin({ // 设置基础路径
	     BASE_URL: "'./'"
	    }),
	  ] 

4.CopyWebpackPlugin

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

javascript 复制代码
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'
	            ]
	          }
	        }
	      ]
	    })
	  ] 
相关推荐
i小杨6 分钟前
前端埋点(打点)方案
前端·状态模式
前端加油站18 分钟前
时间转换那些事
前端·javascript
风清云淡_A37 分钟前
【VUECLI】node.js打造自己的前端cli脚手架工具
前端·node.js
YuspTLstar43 分钟前
一文掌握Redux-toolkit核心原理
前端·react.js
云枫晖1 小时前
手写Promise-静态方法all和allSettled
前端·javascript
weixin_456904271 小时前
前端开发时npm install报错解决方案
前端·npm·node.js
东华帝君1 小时前
Object.create继承
前端
王嘉俊9251 小时前
Flask 入门:轻量级 Python Web 框架的快速上手
开发语言·前端·后端·python·flask·入门
风继续吹..1 小时前
Express.js 入门指南:从零开始构建 Web 应用
前端·javascript·express
一只小风华~1 小时前
命名视图学习笔记
前端·javascript·vue.js·笔记·学习