注意
棄用
npm run build & npm run dev & npm run dll
改成
box build & box dev & box dll
link
npm link 將 box 命令連結到全域性
本章內容
使用
改造為腳手架
多頁面配置
使用
box build # 不加引數則會編譯所有頁面，並清空 distbox dev # 預設編譯 index 頁面
引數
# index2 是指定編譯的頁面。不會清空 dist# report 開啟打包分析box build index2 ——reportbox dev index2 ——report
改造為腳手架
分成三個命令，進行不同操作
build
dev
dll
bin/box。js
#！/usr/bin/env nodeconst chalk = require（“chalk”）；const program = require（“commander”）；const packageConfig = require（“。。/package。json”）；const { cleanArgs } = require（“。。/lib”）；const path = require（“path”）；const __name__ = `build，dev，dll`；let boxConf = {}；let lock = false；try { boxConf = require（path。join（process。cwd（）， “box。config。js”））（）；} catch （error） {}program 。usage（“ ［options］”） 。version（packageConfig。version） 。command（“build ［app-page］”） 。description（`構建開發環境`） 。option（“-r， ——report”， “打包分析報告”） 。option（“-d， ——dll”， “合併差分包”） 。action（async （name， cmd） => { const options = cleanArgs（cmd）； const args = Object。assign（options， { name }， boxConf）； if （lock） return； lock = true； if （boxConf。pages） { Object。keys（boxConf。pages）。forEach（page => { args。name = page； require（“。。/build/build”）（args）； }）； } else { require（“。。/build/build”）（args）； } }）；program 。usage（“ ［options］”） 。version（packageConfig。version） 。command（“dev ［app-page］”） 。description（`構建生產環境`） 。option（“-d， ——dll”， “合併差分包”） 。action（async （name， cmd） => { const options = cleanArgs（cmd）； const args = Object。assign（options， { name }， boxConf）； if （lock） return； lock = true； require（“。。/build/dev”）（args）； }）；program 。usage（“ ［options］”） 。version（packageConfig。version） 。command（“dll ［app-page］”） 。description（`編譯差分包`） 。action（async （name， cmd） => { const options = cleanArgs（cmd）； const args = Object。assign（options， { name }， boxConf）； if （lock） return； lock = true； require（“。。/build/dll”）（args）； }）；program。parse（process。argv）。args && program。parse（process。argv）。args［0］；program。commands。forEach（c => c。on（“——help”， （） => console。log（）））；if （process。argv［2］ && ！__name__。includes（process。argv［2］）） { console。log（）； console。log（chalk。red（` 沒有找到 ${process。argv［2］} 命令`））； console。log（）； program。help（）；}if （！process。argv［2］） { program。help（）；}
多頁面配置
box。config。js
module。exports = function（config） { return { entry： “src/main。js”， // 預設入口 dist： “dist”， // 預設打包目錄 publicPath： “/”， port： 8888， pages： { index： { entry： “src/main。js”， template： “public/index。html”， filename： “index。html” }， index2： { entry： “src/main。js”， template： “public/index2。html”， filename： “index2。html” } }， chainWebpack（config） {} }；}；
