webpack插件的作用是什么？怎樣安裝webpack插件

webpack 插件的作用的作用是什么？

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

① webpack-dev-server

    類似于 node.js 階段用到的 nodemon 工具

    每當修改了源代碼，webpack 會自動進行項目的打包和構建

② html-webpack-plugin

    webpack 中的 HTML 插件（類似于一個模板引擎插件）

    可以通過此插件自定制 index.html 頁面的內容

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

npm install webpack-dev-server@3.11.0 -D

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

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

}

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


多學一招：
打包生成的文件哪兒去了？
①不配置webpack-dev-server 的情況下，webpack 打包生成的文件，會存放到實際的物理磁盤上：
    嚴格遵守開發(fā)者在webpack.config.js 中指定配置
    根據(jù)output 節(jié)點指定路徑進行存放
②配置了webpack-dev-server 之后，打包生成的文件存放到了內存中：
    不再根據(jù)output 節(jié)點指定的路徑，存放到實際的物理磁盤上
    提高了實時打包輸出的性能，因為內存比物理磁盤速度快很多
生成到內存中的文件該如何訪問？
webpack-dev-server 生成到內存中的文件，默認放到了項目的根目錄中，而且是虛擬的、不可見的。
可以直接用/ 表示項目根目錄，后面跟上要訪問的文件名稱，即可訪問內存中的文件，例如 /bundle.js 就表示要訪問webpack-dev-server 生成到內存中的bundle.js 文件。