只知道Webpack怎麼拼怎麼用的我。。被領導委託搭建移動端專案框架。。。
此時的我：
我們雖然對Webpack一竅不通，也得保持風度
“那個大哥，我們這邊移動端用啥UI框架？”
“得過幾天想想。。搞不好我們們自己手寫一套”
這時候我的動力來了：UI框架？做UI框架不是我一直夢寐以求的事情嗎？
“好的老闆。一定完成任務”
熟練的開啟PowerShell，把vue腳手架搞好，把多頁面跟著教程配置好。
OK，接下來遇到難題了：
這個配置方式只支援最基本的多頁面！！
什麼意思呢？如果我在src/page下建立一個passport資料夾。裡面放好同名html js vue檔案後，再在passport資料夾下建立一個reg資料夾，裡面放同名頁面架構。這樣會造成reg.html無法打包。
想了一下，這種問題一般是萬用字元的原因。可能是萬用字元不夠深。
但是看了一眼webpack相關配置資料夾。。頓時就怕了。。。
這都是些啥玩意。。。每個檔案都代表什麼啊。。
於是我花了一下午的時間自己捋了一下。差不多就這個意思（如圖）
1.build.js //webpack的核心打包工具。
2.webpack.*.conf.js //webpack的獨立環境配置和外掛配置。如生產環境，測試環境等。一般每個環境一個檔案
2.webpack.base.conf.js //配置專案目錄別名，資原始檔打包配置的地方(src/assets)
3.*.env.js //配置專案環境私有變數的地方
4.index.js //配置專案打包後資原始檔路徑，dev環境埠號和伺服器配置的地方
OK，基本縷清了webpack架構之後，讓我們驗證猜想吧。
果不其然，在配置完多頁面之後。教程中一段程式碼是這麼尋找的js/html
（原諒我第一張圖忘記畫箭頭了）
果真是萬用字元方式查詢頁面JS。於是改成/**/*.js ，/**/*.html。果真解決問題
好的 現在我們2級子頁面終於找到了。但是打包發現有點問題。such as
打包前：
打包後：
很好 二級頁面變為了一級頁面
那我訪問passport/reg.html豈不是就訪問不到了？
這種問題肯定不能去容忍。於是我著手解決這個問題。
於是在utils.js檔案內 找到了這樣一行程式碼：
這段程式碼的意思是找到絕對路徑的最後一個“/”和它後面的最後一個“ . ”擷取其中的檔名。然後打包出來
有點意思。相當於如果我的目錄是D:/demo/src/page/index/index.js 他就會擷取index。
如果我的目錄是D:/demo/src/page/passport/reg/reg.js 他就會只擷取reg。這樣就會造成輸出的檔案是同級目錄。
找到病因了，那就解決唄。
於是換一種思路去想：既然我的頁面都是在src/page資料夾下。那我找到page後面的“/”然後一直擷取到最後一個“.” 這樣他不就帶層級關係了嗎？？
於是把程式碼換成這個：
let filename = filePath.substring(filePath.indexOf("pages") + 6, filePath.lastIndexOf('.'))複製程式碼這段程式碼的意思是先找到“pages”的下標，然後+6個下標找到pages後面的“/”。最後擷取到最後一個“.”
於是reg頁面輸出為：
/passport/reg/reg
OK 這時候再次打包 發現目錄層級終於正確了
這下終於有個專案架構的樣子了。但是大哥還不滿意：
“這樣，你把css和js檔案放在html同級目錄下吧。不要讓他在單獨的資料夾內了”
what？？這又是什麼鬼？？
經過觀察，打包後的資原始檔放在了static資料夾下。順藤摸瓜，找到了一個看起來像是資源目錄配置的屬性
assetsSubDirectory: 'static',
於是我把他換成了：
assetsSubDirectory: '',
這樣打包後，發現css js資料夾和頁面資料夾同級了？？
這樣比之前更亂了。。
於是找了許久，在webpack.*.conf.js 檔案內找到了js/css輸出的相對路徑
這段程式碼的大體意思根據css/js檔名模板輸出打包後的檔案。但是前面加一個資料夾的路徑，他也會自動建立該資料夾
於是把css/ 和js/去掉。成功解決問題
太開心了！！這下專案架構應該正常了吧
讓我跑一下看看。。嗯。。圖片怎麼跑出來和頁面資料夾同級了？？
難不成....是剛才去掉static為資源輸出資料夾的問題？？
通過檢視誰在使用“assetsSubDirectory”這個屬性時，發現了一個叫 CopyWebpackPlugin的webpack外掛
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])複製程式碼查了一下webpack的document文件。外掛的作用是，將你專案資原始檔夾原封不動地copy到你打包目錄的某個資料夾。
那這樣就好解決了，我把to寫死了不久就ok了麼
to: './static'複製程式碼這樣打包下來，資源和程式碼都正常了。感覺還有點小成就感
這時候，老大又發話了：
“我們們這個系統是有好多環境的。不同的環境有不同的閘道器”
這可難住我了。。到最後仔細看了一下，其實就是每個環境不同的專屬常量而已。。方便介面地址不需要寫域名。直接get全域性閘道器+路徑就行
於是我每個環境都copy了一份不同的webpack.*.conf.js ,*.env.js。其中*.env.js是儲存環境私有常量的
*.env.js配置如下：
'use strict'
const merge = require('webpack-merge')
module.exports = {
NODE_ENV: '"development"', //區別線上環境/生產環境的變數
SERVER_URL: '" **** "', //閘道器。通常用於介面域名配置
IS_DEBUG: true //是否允許開啟Vue Tools
}
複製程式碼然後webpack.*.conf.js需要配置一下：
const env = require('../config/dev.env');複製程式碼這樣你在你自己的程式碼中就可以獲取全域性常量了
示例：
<template>
<div class="aaa">
<span>
這是index {{getBaseURL}}
</span>
</div>
</template>
<script>
export default {
name: "index",
computed: {
getBaseURL() {
return process.env.SERVER_URL; //返回閘道器地址
}
}
}
</script>
<style scoped>
.aaa {
color: red;
}
</style>複製程式碼然後頁面正確顯示閘道器地址
至此。整個專案框架基礎部分算是搭建完畢。搭建完畢後我對webpack也瞭解個一半左右了....
當然，UI框架的製作心得我在後期總結完畢也會寫出來。感謝大家支援！
有錯誤歡迎指正！
參考資源：