插件有什么作用？webpack有多少個插件？

webpack 是前端項目工程化的具體解決方案。 主要功能：它提供了友好的前端模塊化開發(fā)支持，以及代碼壓縮混淆、處理瀏覽器端 JavaScript 的兼容性、性 能優(yōu)化等強大的功能。

webpack通過安裝和配置第三方的插件，可以拓展 webpack 的能力，從而讓 webpack 用起來更方便。最常用的webpack 插件有如下兩個：

① webpack-dev-server

類似于 node.js 階段用到的 nodemon 工具，每當(dāng)修改了源代碼，webpack 會自動進(jìn)行項目的打包和構(gòu)建。

② html-webpack-plugin

webpack 中的 HTML 插件(類似于一個模板引擎插件)，可以通過此插件自定制 index.html 頁面的內(nèi)容。

1.webpack-dev-server

webpack-dev-server 可以讓 webpack 監(jiān)聽項目源代碼的變化，從而進(jìn)行自動打包構(gòu)建。我們先來安裝 webpack-dev-server ，運行如下的命令，即可在項目中安裝此插件：

npm install webpack-dev-server@3.11.2 -D

配置 webpack-dev-server， 修改 package.json -> scripts 中的 dev 命令如下：

"scripts":{
    "dev"："webpack serve",// script 節(jié)點下的腳本，可以通過 npm run 執(zhí)行
}

再次運行 npm run dev 命令，重新進(jìn)行項目的打包，在瀏覽器中訪問 http://localhost:8080 地址，查看自動打包效果。webpack-dev-server 會啟動一個實時打包的 http 服務(wù)器。

webpack打包生成的文件不配置 webpack-dev-server 的情況下，webpack 打包生成的文件，會存放到實際的物理磁盤上。 所以應(yīng)當(dāng)嚴(yán)格遵守開發(fā)者在 webpack.config.js 中指定配置，根據(jù) output 節(jié)點指定路徑進(jìn)行存放。

配置了 webpack-dev-server 之后，打包生成的文件存放到了內(nèi)存中。不再根據(jù) output 節(jié)點指定的路徑，存放到實際的物理磁盤上。提高了實時打包輸出的性能，因為內(nèi)存比物理磁盤速度快很多。

webpack-dev-server 生成到內(nèi)存中的文件，默認(rèn)放到了項目的根目錄中，而且是虛擬的、不可見的。

可以直接用 / 表示項目根目錄，后面跟上要訪問的文件名稱，即可訪問內(nèi)存中的文件 ，例如 /bundle.js 就表示要訪問 webpack-dev-server 生成到內(nèi)存中的 bundle.js 文件。

2.html-webpack-plugin

html-webpack-plugin 是 webpack 中的 HTML 插件，可以通過此插件自定制 index.html 頁面的內(nèi)容。

運行如下的命令，即可在項目中安裝 html-webpack-plugin插件：

npm install html-webpack-plugin@5.3.2 -D

配置html-webpack-plugin的代碼如下所示：

//1.導(dǎo)入HTML插件，得到一個構(gòu)造函數(shù)
const HtmlPlugin = 
require('html-webpack-plugin')

// 2.創(chuàng)建HTML 插件的實例對象
const htmlPlugin = new HtmlPlugin({
  template:'./src/index.html'，//指定原文件的存放路徑
  filename：'./index.html'，//指定生成的文件的存放路徑
})

module.exports = {
    mode: 'development',
    plugins:[htmlPlugin],// 3.通過 plugins節(jié)點,使htmlPlugin 插件生效
}

3.devServer 節(jié)點

在 webpack.config.js 配置文件中，可以通過 devServer 節(jié)點對 webpack-dev-server 插件進(jìn)行更多的配置，示例代碼如下：

devServer: {
    open：true,//初次打包完成后，自動打開瀏覽器
    host：'127.0.0.1'，//實時打包所使用的主機地址
    port：80，//實時打包所使用的端口號
}

注意：凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必須重啟實時打包的服務(wù)器，否則最新的配置文件無法生效!