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

插件有什么作用?webpack有多少個(gè)插件?

更新時(shí)間:2022-09-15 來(lái)源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

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

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

① webpack-dev-server

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

② html-webpack-plugin

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

1.webpack-dev-server

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

npm install webpack-dev-server@3.11.2 -D

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

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

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

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

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

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

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

2.html-webpack-plugin

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

運(yùn)行如下的命令,即可在項(xiàng)目中安裝 html-webpack-plugin插件:

npm install html-webpack-plugin@5.3.2 -D

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

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

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

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


3.devServer 節(jié)點(diǎn)

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

devServer: {
    open:true,//初次打包完成后,自動(dòng)打開(kāi)瀏覽器
    host:'127.0.0.1',//實(shí)時(shí)打包所使用的主機(jī)地址
    port:80,//實(shí)時(shí)打包所使用的端口號(hào)
}

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





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