webpack4多頁面打包腳手架配置

wuliDream發表於2018-11-28
Web

本文不介紹原理，只安利我在公司中使用的webpack4搭建的多頁面腳手架，拿來即用。

多頁面，可以是傳統的jq,zepto寫的頁面，也可以是vue,react寫的，可擴充套件性較高。本gituhub倉庫只針對.js做處理，沒有對.vue,.jsx做處理，如需要，請自行新增。程式碼倉庫

下面針對覆蓋的做簡單介紹，對需要注意對做重點介紹。（專案目錄不是最優，因為都是老的專案，由於一些頁面地址已經在客戶端寫死，沒有處理目錄結構）

目錄結構

webpack4多頁面打包腳手架配置

原始碼目錄結構

webpack4多頁面打包腳手架配置

重點目錄說明

config下是關於開發環境代理介面，及入口函式和開發伺服器配置

script下是開發環境webpack打包的入口配置檔案

mock下是mock服務的相關配置和介面的檔案，如攔截到mock下有介面直接請求mock下的介面。沒有相應介面，直接走代理伺服器介面

src下是原始碼

webpack.plguins.js是關於webpack外掛的配置

webpack.rules.js是關於loader的相關配置

其他檔案應該一目瞭然了

其他

       1.webpack4打包注意點

           webpack已js為入口，我們傳統頁面是在src下建.html檔案，這裡面就做了個已src/*.html 遍歷，存入陣列，然後在src/js下必須要有相應的檔名.js 即使是一個簡單的html沒有js，也需要新建相應js檔案。

webpack4多頁面打包腳手架配置

webpack4多頁面打包腳手架配置

也可以在遍歷時候，如果有ts，不拼接.js,

entryObj[item] = path.resolve(__dirname, 'src/js', item)
複製程式碼

在resolve 增加extensions: ['.ts', '.tsx', '.js'],

如果是開發環境，則入口多加mock服務，和一個渲染src/*.html列表的入口

if (devMode) {  config.entry.mock = path.resolve(__dirname, 'mock/index.js')  config.entry.index = path.resolve(__dirname, 'config/indexEntry.js')}複製程式碼

plugin相關配置

html相關處理

webpack4多頁面打包腳手架配置

使用，開發環境...htmpConf(['mock', 'rem'])，生產...htmpConf([ 'rem'])

css分離外掛老的extract-text-webpack-plugin已經不相容webpack4，需使用mini-css-extract-plugin，而且可以打包出contenthash，效能較好

命令中傳引數使用了個外掛cross-env

loader處理沒特殊的，css開發環境不分離，生產分離

dev環境伺服器配置

webpack4多頁面打包腳手架配置

dev環境用node去啟用，需用到require('webpack-dev-server').addDevServerEntrypoints方法。

lib下和asset下存放copy檔案。我們專案zepto不作為公用，所以在html檔案中需手動引入（考慮到有的純靜態頁）

其他不清楚，詳見原始碼。

       2.代理服務

代理其實很簡單就webpack-dev-server配置proxy，還可以注入相關token,header等等

onProxyReq: function (proxyReq, req, res) {      proxyReq.setHeader('cookie', proxyConfig.config[PROXY_ENV]['cookie'])    }複製程式碼

       3.mock服務

當命令列配置IS_MOCK=true時候開啟，然後在dev環境多注入入口，在html外掛中也加入相關chunk即可，手動更改插入chunk順序設定chunksSortMode: 'manual',然後編寫mock服務即可，詳細使用可以參考官網,簡單到使用可以參照為我的readme

       4.eslint規範

  {    test: /\.js$/,    use: [      'babel-loader',      {        loader: 'eslint-loader',        options: {          formatter: require('eslint-friendly-formatter') // 預設的錯誤提示方式        }      }    ],    exclude: '/node_modules/'  },複製程式碼

詳細配置在.eslintrc.js，本倉庫參照standard標準。一些關於全域性到jq,$，可以配置true，eslint則不拋錯

"globals":{    $: true,    Zepto: true,    IS_MOCK: true,    INDEX_LIST: true  },複製程式碼

 一些exlint命令

eslint src //掃描src目錄下的.js檔案
eslint --ext .js,.vue src // 掃描src下的.js與.vue字尾檔案（預設只掃描.js檔案）

eslint --fix src // 修正src下面的.js檔案格式錯誤（會自動調整檔案）       

   5.git提交資訊規範化

推薦commitizen外掛，可以規範專案中每個人的使用規範，本倉庫也配置了，只需要npm i commitizen -g,在程式碼提交時候，git commit -'xxx'替換為git cz，則可以按照外掛規範，互動式的提交。

關於commitizen快速使用,詳細參照相關文件

step1:npm i commitizen -g

step2:commitizen init cz-conventional-changelog --save --save-exact

本文結束


相關文章