Webpack 4 構建大型項目實踐 / 開發服務

本文所用示例的倉庫地址： gayhub

上一節咱們把 vue 全家桶加入到項目，併成功打包部署，但在實現過程當中不止一次想到：不基於 Webpack 構建開發時，個人改動能很直觀的就在瀏覽器中看到（只須要刷新一下瀏覽器），但如今你告訴我改動後須要打包才能看到結果，個人開發體驗呢？

本節就將經過使用 webpack-dev-server 來解決這個問題，而且在體驗上會比之前更好，由於連刷新瀏覽器都不須要你作了。

watch

在介紹 webpack-dev-server 以前，咱們其實還有一種不完善的方法來處理開發環境調試的問題，那就是 Webpack 的 watch 選項聯合使用 vue-router 的 hash 模式。

使用 watch 選項時， Webpack 會啓動一個服務監聽文件的變化，在文件變化後從新執行 webpack 打包指令。 vue-router 的 hash 模式又能保證，你能夠用 file 協議訪問 index.html 來查看頁面展現。因此在文件修改且打包完成後，刷新瀏覽器就能看到修改後的頁面內容，和原始的開發體驗相似。

webpack.config.js

module.exports = {
  watch: true
}
複製代碼

但既然有更好的調試方式，咱們天然要繼續學下去。

webpack-dev-server

webpack-dev-server 是 Webpack 官方的工具依賴，用啓動一個開發服務，它有監聽文件變化、熱模塊替換、代理請求等功能，極大程度方便開發者的調試工做（ vue-cli 的 dev 命令就是使用 webpack-dev-server）。

yarn add webpack-dev-server -D
複製代碼

npx webpack-dev-server
複製代碼

命令行能夠看到此時啓動的服務信息， Webpack 執行打包而且啓動了一個靜態資源訪問服務，端口爲 8080 （ 8080 端口未被佔用的狀況下）。在沒有對配置進行任何修改的狀況下，開發服務啓動且功能正常，由於 webpack-dev-server 默認配置正在生效。咱們能夠經過在 Webpack 配置文件中增長 devServer 選項來自定義 webpack-dev-server 的配置，下面將介紹經常使用配置項。

• devServer.host 指定開發服務的 IP ，或者叫作主機地址，默認 localhost。

• devServer.port 指定開發服務的端口，默認 8080

• devServer.open 開發服務啓動後，是否在瀏覽器打開服務地址，默認 false

• devServer.index 索引文件名，默認 index.html

• devServer.compress 是否啓用 gzip 壓縮，默認 true

• devServer.hot 是否啓用熱模塊替換，也就是修改代碼後不需你手動刷新瀏覽器，瀏覽器加載差別內容自動替換，默認 true

• devServer.hotOnly 熱模塊替換功能失敗時是否刷新瀏覽器，默認 true

• devServer.https 是否啓用 https 協議，默認 false

• devServer.inline

  是否啓用內聯模式，默認 true

  推薦使用 模塊熱替換 的內聯模式，由於它包含來自 websocket 的 HMR 觸發器。輪詢模式能夠做爲替代方案，但須要一個額外的入口點：'webpack/hot/poll?1000'

• devServer.clientLogLevel

  string: 'none' | 'info' | 'error' | 'warning'

  日誌打印等級，默認 info ，通常設置爲 none ，不然控制檯會有不少干擾信息（熱加載的一些信息）

• devServer.stats

  string: 'none' | 'errors-only' | 'minimal' | 'normal' | 'verbose' object

  命令行顯示 bundle 信息的等級，通常設置爲 minimal

• devServer.proxy 設置 API 代理， 默認 {}

而後咱們把上方的經常使用配置，寫到配置文件裏

devServer: {
    open: true,
    compress: true,
    port: 9002,
    hot: true,
    hotOnly: false,
    historyApiFallback: true, // 任意的 404 響應都被替代爲 index.html
    clientLogLevel: 'none',
    stats: 'minimal',
    inline: true,
    proxy: {
      '/api': {
        target: 'http://0.0.0.0:8081/',
        pathRewrite: {
          '/api': ''
        }
      }
    }
  }
複製代碼

配置規範

npm scripts

上方在使用 webpack-dev-server 命令的時候我有用到 npx， 由於 webpack-dev-server 依賴是安裝在項目目錄下的，而不是全局，因此須要使用 npx 來調用項目 node_modules/.bin 目錄下的 webpack-dev-server.cmd 。那如今咱們有了兩個命令 webpack / webpack-dev-server ，且隨着項目的持續開發命令會變得更多，因此咱們須要把命令維護到 package.json 中，方便本身使用也讓項目更容易理解（npm run [script]）。

npx 命令是 npm 在 5.2 版本更新的一個命令

npm scripts 會優先調用 node_modules/.bin 中的命令

package.json

{
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

複製代碼

配置文件變更

在這以前咱們把配置信息都寫在了默認的配置文件 webpack.config.js 中，但如今出現兩個模式的配置（生產和開發），再維護在一個文件裏邊就顯得比較臃腫且蠢（兩個模式須要分別優化打包），因此咱們把配置文件的結構也作一些改進。

• 環境配置、公共配置分離

  • webpack.base.conf.js 公共配置
  • webpack.prod.conf.js 開發環境配置
  • webpack.dev.conf.js 生產環境配置

• 工具函數分離

  好比我以前的配置中常常使用到 path.resolve(__dirname, './xx') ，這其實能夠剝離爲公共函數

  • utils.js 工具函數

• 增長對外接口

  • build.js 根據環境信息選用配置文件

• 增長配置文件

  • config.js 設定一些常見的配置開關

• 增長 clean-webpack-plugin

  用於每次打包時清空 \dist 目錄

  yarn add clean-webpack-plugin -D
  複製代碼

  const CleanWebpackPlugin = require('clean-webpack-plugin')
  // ...
  module.exports = {
    plugins: [
      new CleanWebpackPlugin(['dist'], {
        root: resolve('')
      })
    ]
  }
  複製代碼

• 修改 npm scripts

  {
    "scripts": {
      "dev": "webpack-dev-server --progress --config build/build.js",
      "build": "node build/build.js production",
      "test": "echo \"Error: no test specified\" && exit 1"
    }
  }
  複製代碼

具體改動請參考 Github 中本節提供的例子

參考文檔

• [ Webpack Docs ] devServer