前端項目框架搭建隨筆---Webpack踩坑記

只知道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框架的製做心得我在後期總結完畢也會寫出來。感謝你們支持！

有錯誤歡迎指正！

參考資源：

用vue構建多頁面應用

webpack中文文檔