快捷導(dǎo)航

webpack5 常用插件使用問(wèn)題小結(jié)

更新時(shí)間：2024年02月17日 10:43:35 作者：前端小咸魚(yú)一條

webpack 是一個(gè)模塊打包器,這篇文章主要介紹了webpack5 常用插件使用問(wèn)題小結(jié),每次打包完都需要手動(dòng)刪除掉dist文件目錄,使用CleanWebpackPlugin就可自動(dòng)清除dist目錄,感興趣的朋友跟隨小編一起看看吧

webpack5常用插件使用

1. CleanWebpackPlugin

問(wèn)題：每次打包完都需要手動(dòng)刪除掉dist文件目錄，使用CleanWebpackPlugin就可自動(dòng)清除dist目錄。作用：自動(dòng)清除dist文件目錄

1. 安裝 npm install clean-webpack-plugin -D
	2. 解構(gòu) 
		 插件大都是封裝成一個(gè)class的，也可以是函數(shù)，然后到時(shí)候去調(diào)用的hook回調(diào)
		 因?yàn)樗鼘?dǎo)出的是一個(gè)對(duì)象，所以要通過(guò)解構(gòu)取出來(lái)一個(gè)類(lèi)。
		 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
	4. 配置  plugins:[
		  	  new CleanWebpackPlugin(),
		    ]

2. HtmlWebpackPlugin

問(wèn)題：幫助我們打包的時(shí)候生成一個(gè)html入口文件，還可通過(guò)options設(shè)置html模板和標(biāo)題。

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

3. DefinePlugin

問(wèn)題：幫助我們?cè)O(shè)置全局基礎(chǔ)路徑。允許創(chuàng)建一個(gè)在編譯時(shí)可配置的全局常

1. 解構(gòu)，webpack5自帶有，導(dǎo)出的是一個(gè)對(duì)象解構(gòu)好直接引用。
const { DefinePlugin } = require('webpack')
2. 配置模板的基礎(chǔ)路徑
	  plugins:[
 		new DefinePlugin({ // 設(shè)置基礎(chǔ)路徑
	     BASE_URL: "'./'"
	    }),
	  ]

4.CopyWebpackPlugin

問(wèn)題：打包的時(shí)候有些文件不需要打包生成，直接復(fù)制到打包好的文件目錄中。復(fù)制某個(gè)文件或整個(gè)文件夾到生成目錄中

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

到此這篇關(guān)于webpack5 常用插件使用的文章就介紹到這了,更多相關(guān)webpack5 插件使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: