首頁技術(shù)文章正文

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

更新時(shí)間:2021-11-15 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

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

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

① webpack-dev-server

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

    每當(dāng)修改了源代碼,webpack 會自動進(jìn)行項(xiàng)目的打包和構(gòu)建

② html-webpack-plugin

    webpack 中的 HTML 插件(類似于一個(gè)模板引擎插件)

    可以通過此插件自定制 index.html 頁面的內(nèi)容

webpack-dev-server 可以讓 webpack 監(jiān)聽項(xiàng)目源代碼的變化,從而進(jìn)行自動打包構(gòu)建。
運(yùn)行如下的命令,即可在項(xiàng)目中安裝webpack插件:

npm install webpack-dev-server@3.11.0 -D

下面進(jìn)行webpack-dev-server配置,修改package.json -> scripts中的dev命令:

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

}

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


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






猜你喜歡:

webpack體積怎么優(yōu)化?有哪些方法?

怎樣配置 webpack 的打包發(fā)布?

VUE是什么意思?【web前端開發(fā)培訓(xùn)】

黑馬程序員web前端開發(fā)開發(fā)工程師培訓(xùn)

分享到:
在線咨詢 我要報(bào)名
和我們在線交談!