webpack4多頁面打包腳手架配置

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

多頁面，能夠是傳統的jq,zepto寫的頁面，也能夠是vue,react寫的，可擴展性較高。本gituhub倉庫只針對.js作處理，沒有對.vue,.jsx作處理，如須要，請自行添加。代碼倉庫

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

目錄結構

源碼目錄結構

重點目錄說明

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文件。

也能夠在遍歷時候，若是有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相關處理

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

css分離插件老的extract-text-webpack-plugin已經不兼容webpack4，需使用mini-css-extract-plugin，並且能夠打包出contenthash，性能較好

命令中傳參數使用了個插件cross-env

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

dev環境服務器配置

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

本文結束