六、外掛程式（plugins）
外掛程式（plugins）是用來拓展webpack功能的，它們會在整個構建過程中生效，執行相關的任務。
loaders和plugins常常被弄混，但是他們其實是完全不同的東西，可以這麼來說，loaders是在打包構建過程中用來處理原始檔的（jsx，scss，less..），一次處理乙個，外掛程式並不直接操作單個檔案，它直接對整個構建過程其作用。
6.1 外掛程式如何使用
const webpack = require('webpack'); // 這個外掛程式不需要安裝，是基於webpack的，需要引入webpack模組
module.exports = ,,,
exclude: /node_modules/ // 排除匹配node_modules模組}]
},plugins: []}
執行npm run build打包後我們看到bundle.js檔案顯示如下：
6.2 自動生成html檔案(htmlwebpackplugin)
到目前為止我們都是使用一開始建好的index.html檔案，而且也是手動引入bundle.js，要是以後我們引入不止乙個js檔案，而且更改js檔名的話，也得手動更改index.html中的js檔名，所以能不能自動生成index.html且自動引用打包後的js呢？htmlwebpackplugin外掛程式就是用來解決這個問題的：
首先安裝該外掛程式
然後我們對專案結構進行一些更改：
把dist整個資料夾刪除；
在src資料夾下新建乙個index.template.html(名稱自定義)檔案模板（當然這個是可選的，因為就算不設定模板，htmlwebpackplugin外掛程式也會生成預設html檔案，這裡我們設定模組會讓我們的開發更加靈活），如下：
here is templatetitle>
head>
div>
body>
html>
webpack.config.js中我們引入了htmlwebpackplugin外掛程式，並配置了引用了我們設定的模板，如下：
const path = require('path'); // 路徑處理模組
const webpack = require('webpack'); // 這個外掛程式不需要安裝，是基於webpack的，需要引入webpack模組
const htmlwebpackplugin = require('html-webpack-plugin'); // 引入htmlwebpackplugin外掛程式
module.exports = ,
devserver: ,
devtool: 'source-map', // 會生成對於除錯的完整的.map檔案，但同時也會減慢打包速度
module: ,,,
exclude: /node_modules/ // 排除匹配node_modules模組}]
},plugins: [
new htmlwebpackplugin()]}
然後我們使用npm run build進行打包，你會發現，dist資料夾和html檔案都會自動生成，如下：
為什麼會自動生成dist資料夾呢？因為我們在output出口配置項中定義了出口檔案所在的位置為dist資料夾，且出口檔名為bundle.js，所以htmlwebpackplugin會自動幫你在index.html中引用名為bundle.js檔案，如果你在webpack.config.js檔案中更改了出口檔名，index.html中也會自動更改該檔名，這樣以後修改起來是不是方便多了？
6.3 清理/dist資料夾(cleanwebpackplugin)
你可能已經注意到，在我們刪掉/dist資料夾之前，由於前面的**示例遺留，導致我們的/dist資料夾比較雜亂。webpack會生成檔案，然後將這些檔案放置在/dist資料夾中，但是webpack無法追蹤到哪些檔案是實際在專案中用到的。
通常，在每次構建前清理/dist資料夾，是比較推薦的做法，因此只會生成用到的檔案，這時候就用到cleanwebpackplugin外掛程式了。
...const cleanwebpackplugin = require('clean-webpack-plugin'); // 引入cleanwebpackplugin外掛程式
module.exports = ),
new cleanwebpackplugin(['dist']), // 所要清理的資料夾名稱]}
外掛程式的使用方法都是一樣的，首先引入，然後new乙個例項，例項可傳入引數。
現在我們執行npm run build後就會發現，webpack會先將/dist資料夾刪除，然後再生產新的/dist資料夾。
6.4 熱更新(hotmodulereplacementplugin)
hotmodulereplacementplugin（hmr）是乙個很實用的外掛程式，可以在我們修改**後自動重新整理預覽效果。
方法：devserver配置項中新增hot: true引數。
因為hotmodulereplacementplugin是webpack模組自帶的，所以引入webpack後，在plugins配置項中直接使用即可。
...const webpack = require('webpack'); // 這個外掛程式不需要安裝，是基於webpack的，需要引入webpack模組
module.exports = ,
...plugins: [
new htmlwebpackplugin(),
new cleanwebpackplugin(['dist']), // 傳入所要清理的資料夾名稱
new webpack.hotmodulereplacementplugin() // 熱更新外掛程式 ]}
此時我們重新啟動專案npm run dev後，修改hello.js的內容，會發現瀏覽器預覽效果會自動重新整理（也許反應會比較慢，因為我們使用了source-map和其他配置的影響，後面**分離的時候我們再處理）。
webpack4 x的使用歷程
第一次接觸的webpack是在乙個3.x的資料中 在4.x的運用中遇到了好多的坑，我就以小白的身份把我使用webpaxk的過程分享出來，其中很多不足歡迎大佬們指正 node安裝不再贅述 一 安裝 npm i webpack d 在專案中安裝 webpack 4.16.5 npm install we...
webpack 4 x安裝命令
執行npm i webpack g全域性安裝webpack，這樣就能在全域性使用webpack的命令 在專案根目錄中執行npm i webpack安裝到專案依賴中 執行npm init y初始化專案 建立專案基本的目錄結構src 和 dist,在src裡新建index.html 使用npm i jq...
webpack 4 X 基礎編譯
webpack4.x的打包已經不能用webpack 檔案a 檔案b的方式，而是直接執行webpack mode development或者webpack mode production，這樣便會預設進行打包，入口檔案是 src index.js 輸出路徑是 dist main.js 其中src目錄即...