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

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

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

webpack5常用插件使用

1. CleanWebpackPlugin

問題：每次打包完都需要手動刪除掉dist文件目錄，使用CleanWebpackPlugin就可自動清除dist目錄。作用：自動清除dist文件目錄

1. 安裝 npm install clean-webpack-plugin -D
	2. 解構 
		 插件大都是封裝成一個class的，也可以是函數(shù)，然后到時候去調(diào)用的hook回調(diào)
		 因為它導出的是一個對象，所以要通過解構取出來一個類。
		 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

問題：幫助我們設置全局基礎路徑。允許創(chuàng)建一個在編譯時可配置的全局常

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 插件使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: