好家伙,
1.webpack的基本使用
寫個例子:實作一個奇偶行變色串列
步驟如下:
① 新建專案空白目錄，并運行 npm init-y命令，初始化包管理組態檔 package.json
② 新建src源代碼目錄
③ 新建 src->index.html 首頁和src-> index.js 腳本檔案
④ 初始化首頁基本的結構
⑤ 運行 npm install jquery-S命令，安裝jQuery
⑥ 通過ES6 模塊化的方式匯入jQuery,實作串列隔行變色效果
可以看到并沒有實作效果
語法太高級,瀏覽器不兼容
試著用webpack去解決這個問題
2.在專案中安裝webpack
在終端運行如下的命令，安裝webpack相關的兩個包：
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
其中
－S是 --save的簡寫
－D是 --save-dev的簡寫
3.在專案中配置 webpack
①在專案根目錄中，創建名為webpack.config.js的 webpack組態檔，并初始化如下的基本配置：
module.exports={ mode:'development' }
// mode 用來指定構建模式，可選值有 development 和 production
②在package.json的scripts節點下，新增 dev 腳本如下：
"scripts":{ ＂dev": "webpack" }
// script 節點下的腳本，可以通過 npm run 執行，例如 npm run dev
③在終端中運行 npm run dev 命令，啟動 webpack 進行專案的打包構建
(出現了 ! 出現了 ! ! 是 " npm run dev " ! ! ! )
跑完之后:
成功了
其中多了一個dist檔案,其中的main檔案就是處理好后的檔案
將<script>的src的路徑改為main.js的路徑
再次打開
搞定了
(配色有點陰間但是問題不大)
4.補充一個小點
4.1.這個是"development"版本的"npm run dev"
4.2這個是"production"版本的"npm run dev"
兩圖對比可看出:"development"版本的打包速度更快(開發版本需要打包快),
"production"版本的打包出來檔案體積更小,(發布版本需要檔案小)
That's all.
溜了溜了
"黑馬程式員"NB
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/400323.html
標籤：其他