怎樣編寫一個通用 webpack 構建配置

前沿

有興趣能夠去極客時間《玩轉 webpack 課程》

爲何要將構建配置抽離成 npm 包？

通用性

• 業務開發者無需關注構建配置
• 統一團隊構建腳本

可維護性

• 構建配置合理的拆分
• README 文檔

質量

• 冒煙測試
• 方便持續繼承，讓每次提交都能檢查

構建配置方案

• 方案一：經過配置文件管理不一樣環境的構建，webpack --config 參數控制
• 方案二：設計成一個庫，相似於：hjs-webpack，webpack-blocks
• 方案三：抽成一個工具進行管理，相似咱們經常使用的 create-react-app
• 方案四：集成在一個配置文件，經過 --env 參數控制分支選擇 綜上幾種方案，本篇文章在於構建一個通用配置，因此本篇選擇綜合方案一和二，若是你的團隊人員規模很大，建議採用方案三

基礎概念鞏固

webpack 核心概念有 entry、output、loader、plugins、mode

entry - 用來指定 webpack 打包入口

- 單入口：entry 是一個字符串 
 ```
 module.exports = {
      entry: './path/to/my/entry/file.js'
 }
 ```
 - 多入口： entry 是一個對象
  ```
     module.exports = {
          entry: {
              app: './src/index.js',
              home: './src/home'
          }
     }
```
複製代碼

output - 告訴 webpack 如何將編譯後的文件進行輸出

• 單入口

```
 module.exports = {
      entry: './path/to/my/entry/file.js',
       output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js'
      }
 }
```
複製代碼

• 多入口

```
 module.exports = {
          entry: {
              app: './src/index.js',
              home: './src/home'
          },
          output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].js' // 經過佔位符確保文件名稱不一致
          }
     }
```
複製代碼

loaders - 是一個函數，接受源文件做爲參數，返回轉換結果。

webpack 自己只支持 js 和 json 兩種文件類型，經過 loaders 能夠去支持其餘文件類型而且將他們轉換成有效的模塊，還能添加到依賴模圖中。
經常使用loaders 後面構建會用到

名稱	描述
babel-loader	轉換 es六、es7等新特性寫法
file-loader	進行圖片文字等打包
css-loader	支持.css文件類型加載和解析
less-loader	less轉換成 css
ts-loader	ts轉換成js

plugins - 用於 bound.js 文件優化，資源管理和環境變量注入，做用於整個構建過程

經常使用的 plugins

名稱	描述
clean-webpack-plugin	清理構建目錄
html-webpack-plugin	建立html 文件去承載bound文件
friendly-errors-webpack-plugin	友好的錯誤提示
uglifyjs-webpack-plugin	壓縮 js
zip-webpack-plugin	打包文件壓縮成 zip
commons-chunk-plugin	將相同模塊提成公共js

mode - 用來指定當前構建環境，默認 production

環境	描述
development	設置 process.env.NODE_ENV 爲development ，開啓 NamedChunkplugin 和 namedModulesPlugin 代碼熱更新時很適用
production	webpack 會去開啓默認壓縮等
none	不開啓任何優化選項

項目設計

經過多個配置文件管理不一樣環境的 webpack 配置

• 基礎配置 webpack.base.js
• 開發環境 webpack.dev.js
• 生產環境 webpack.prod.js
• 若是你有 ssr 的需求能夠 webpack.ssr.js

打包成 npm 包統一管理

• 規範： git commit 日誌，eslint等
• 質量保證： 冒煙測試、單元測試、測試覆蓋率

開發通用包

項目設計

設計腦圖以下：

項目目錄結構以下

rick-webpack
├─.eslintrc
├─.gitignore
|─.travis.yml
├─CHANGELOG.md
├─README.md
├─package.json
├─test   // 測試文件
├─lib   //放置配置代碼
|  ├─webpack.base.js
|  ├─webpack.dev.js
|  └webpack.prod.js
複製代碼

eslint 規範腳本

npm i eslint babel-eslint eslint-config-airbnb-base -D
複製代碼

新增一個 .eslintrc文件

{
  "root": true,
  "env": {
    "node": true
  },
  "parser": "babel-eslint",
  "extends": ["airbnb-base"],
  "rules": {
    "indent": ["error", 4]
  }
}
複製代碼

單元測試、冒煙測試、測試覆蓋率

冒煙測試能夠保證咱們的框架是否可用，可是細節部分就須要咱們用單元測試

經常使用單元測試框架

• mocha 功能豐富，簡單上手
• jest

持續集成 和 travis CI

核心思想： 代碼集成到主幹以前，必須經過自動化測試，只要有一個用例失敗，就不能集成到主幹。

爲什麼引入持續集成？

• 快速發現錯誤
• 防止分支大幅度偏離主幹

選擇 travis CI 緣由

github目前流行 CI ，travis CI 佔比很明顯

怎麼樣接入travis CI?

接入方式很簡單，只須要簡單三步

• 使用 github 登陸網站 www.travis-ci.org
• www.travis-ci.org/account/rep… 開啓本身的項目
• 項目根目錄新增 .travis.yml

language: node_js

sudo: false

cache:
  apt: true
  directories:
    - node_modules

node_js: stable  #設置相應的版本

 install:
  - npm install -D  #安裝 builder 依賴

 script:
  - npm test
複製代碼

git commit規範和changelog

後續在迭代過程很重要 良好的 git commit有如下優點

• 加快 code review 流程
• 根據 git commit 的元數據生成 changelog
• 後續維護者能夠知道 feature 被修改的緣由 目前推薦採用 git commit angular 規範

具體代碼和課件

參考資料

• builder-webpack4
• builder-webpack3