webpack5 常用插件使用

本文主要是介绍webpack5 常用插件使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. CleanWebpackPlugin

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

	1. 安装 npm install clean-webpack-plugin -D2. 解构 插件大都是封装成一个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 常用插件使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---