更新時間:2022-09-15 來源:黑馬程序員 瀏覽量:
webpack 是前端項目工程化的具體解決方案。 主要功能:它提供了友好的前端模塊化開發(fā)支持,以及代碼壓縮混淆、處理瀏覽器端 JavaScript 的兼容性、性 能優(yōu)化等強大的功能。
webpack通過安裝和配置第三方的插件,可以拓展 webpack 的能力,從而讓 webpack 用起來更方便。最常用的webpack 插件有如下兩個:
① webpack-dev-server
類似于 node.js 階段用到的 nodemon 工具,每當修改了源代碼,webpack 會自動進行項目的打包和構建。
② html-webpack-plugin
webpack 中的 HTML 插件(類似于一個模板引擎插件),可以通過此插件自定制 index.html 頁面的內容。
1.webpack-dev-server
webpack-dev-server 可以讓 webpack 監(jiān)聽項目源代碼的變化,從而進行自動打包構建。我們先來安裝 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 命令,重新進行項目的打包,在瀏覽器中訪問 http://localhost:8080 地址,查看自動打包效果。webpack-dev-server 會啟動一個實時打包的 http 服務器。
webpack打包生成的文件不配置 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 文件。
2.html-webpack-plugin
html-webpack-plugin 是 webpack 中的 HTML 插件,可以通過此插件自定制 index.html 頁面的內容。
運行如下的命令,即可在項目中安裝 html-webpack-plugin插件:
npm install html-webpack-plugin@5.3.2 -D
配置html-webpack-plugin的代碼如下所示:
//1.導入HTML插件,得到一個構造函數(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 插件進行更多的配置,示例代碼如下:
devServer: { open:true,//初次打包完成后,自動打開瀏覽器 host:'127.0.0.1',//實時打包所使用的主機地址 port:80,//實時打包所使用的端口號 }
注意:凡是修改了 webpack.config.js 配置文件,或修改了 package.json 配置文件,必須重啟實時打包的服務器,否則最新的配置文件無法生效!