摘要：作者按因為教程所示圖片使用的是倉庫圖片，網(wǎng)速過慢的朋友請移步系列教程十五開發(fā)模式與原文地址。而開發(fā)模式就是指定為。在非開發(fā)模式下，需要關(guān)閉此選項，以減小打包體積。在單頁應(yīng)用中，任何響應(yīng)直接被替代為。

作者按：因為教程所示圖片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請移步《webpack4 系列教程(十五)：開發(fā)模式與 webpack-dev-server》原文地址。更歡迎來我的小站看更多原創(chuàng)內(nèi)容：godbmw.com，進(jìn)行“姿勢”交流 ?(^?^*)

>>>本節(jié)課源碼

>>>所有課程源碼

本節(jié)課的代碼目錄如下：

本節(jié)課用的 plugin 和 loader 的配置文件package.json如下：

{
  "scripts": {
    "dev": "webpack-dev-server --open"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^3.3.1",
    "webpack": "^4.16.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.4"
  }
}

在之前的課程中，我們都沒有指定參數(shù)mode。但是執(zhí)行webpack進(jìn)行打包的時候，自動設(shè)置為production，但是控制臺會爆出warning的提示。而開發(fā)模式就是指定mode為development。

在開發(fā)模式下，我們需要對代碼進(jìn)行調(diào)試。對應(yīng)的配置就是：devtool設(shè)置為source-map。在非開發(fā)模式下，需要關(guān)閉此選項，以減小打包體積。

在開發(fā)模式下，還需要熱重載、路由重定向、掛代理等功能，webpack4已經(jīng)提供了devServer選項，啟動一個本地服務(wù)器，讓開發(fā)者使用這些功能。

根據(jù)文章開頭的package.json的配置，只需要在命令行輸入：npm run dev即可啟動開發(fā)者模式。

啟動效果如下圖所示：

雖然控制臺輸出了打包信息（假設(shè)我們已經(jīng)配置了熱重載），但是磁盤上并沒有創(chuàng)建/dist/文件夾和打包文件。控制臺的打包文件的相關(guān)內(nèi)容是存儲在內(nèi)存之中的。

首先，編寫一下入口的 html 文件：

  
  
  
  


  This is Index html

然后，按照項目目錄，簡單封裝下/vendor/下的三個 js 文件，以方便app.js調(diào)用：

// minus.js
module.exports = function(a, b) {
  return a - b;
};

// multi.js
define(function(require, factory) {
  "use strict";
  return function(a, b) {
    return a * b;
  };
});

// sum.js
export default function(a, b) {
  console.log("I am sum.js");
  return a + b;
}

好了，準(zhǔn)備進(jìn)入正題。

由于配置內(nèi)容有點多，所以放代碼，再放講解。

webpack.config.js配置如下所示：

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const path = require("path");

module.exports = {
  entry: {
    app: "./app.js"
  },
  output: {
    publicPath: "/",
    path: path.resolve(__dirname, "dist"),
    filename: "[name]-[hash:5].bundle.js",
    chunkFilename: "[name]-[hash:5].chunk.js"
  },
  mode: "development", // 開發(fā)模式
  devtool: "source-map", // 開啟調(diào)試
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    port: 8000, // 本地服務(wù)器端口號
    hot: true, // 熱重載
    overlay: true, // 如果代碼出錯，會在瀏覽器頁面彈出“浮動層”。類似于 vue-cli 等腳手架
    proxy: {
      // 跨域代理轉(zhuǎn)發(fā)
      "/comments": {
        target: "https://m.weibo.cn",
        changeOrigin: true,
        logLevel: "debug",
        headers: {
          Cookie: ""
        }
      }
    },
    historyApiFallback: {
      // HTML5 history模式
      rewrites: [{ from: /.*/, to: "/index.html" }]
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./index.html",
      chunks: ["app"]
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.ProvidePlugin({
      $: "jquery"
    })
  ]
};

模塊熱更新需要HotModuleReplacementPlugin和NamedModulesPlugin這兩個插件，并且順序不能錯。并且指定devServer.hot為true。

有了這兩個插件，在項目的 js 代碼中可以針對偵測到變更的文件并且做出相關(guān)處理。

比如，我們啟動開發(fā)模式后，修改了vendor/sum.js這個文件，此時，需要在瀏覽器的控制臺打印一些信息。那么，app.js中就可以這么寫：

if (module.hot) {
  // 檢測是否有模塊熱更新
  module.hot.accept("./vendor/sum.js", function() {
    // 針對被更新的模塊, 進(jìn)行進(jìn)一步操作
    console.log("/vendor/sum.js is changed");
  });
}

每當(dāng)sum.js被修改后，都可以自動執(zhí)行回調(diào)函數(shù)。

隨著前后端分離開發(fā)的普及，跨域請求變得越來越常見。為了快速開發(fā)，可以利用devServer.proxy做一個代理轉(zhuǎn)發(fā)，來繞過瀏覽器的跨域限制。

按照前面的配置文件，如果想調(diào)用微博的一個接口：https://m.weibo.cn/comments/hotflow。只需要在代碼中對/comments/hotflow進(jìn)行請求即可：

$.get(
  "/comments/hotflow",
  {
    id: "4263554020904293",
    mid: "4263554020904293",
    max_id_type: "0"
  },
  function(data) {
    console.log(data);
  }
);

當(dāng)項目使用HTML5 History API 時，任意的 404 響應(yīng)都可能需要被替代為 index.html。

在 SPA（單頁應(yīng)用）中，任何響應(yīng)直接被替代為index.html。

在 vuejs 官方的腳手架vue-cli中，開發(fā)模式下配置如下：

// ...
historyApiFallback: {
  rewrites: [{ from: /.*/, to: "/index.html" }];
}
// ...

最后，在前面所有的基礎(chǔ)上，讓我們來編寫下入口文件app.js：

import sum from "./vendor/sum";
console.log("sum(1, 2) = ", sum(1, 2));
var minus = require("./vendor/minus");
console.log("minus(1, 2) = ", minus(1, 2));
require(["./vendor/multi"], function(multi) {
  console.log("multi(1, 2) = ", multi(1, 2));
});

$.get(
  "/comments/hotflow",
  {
    id: "4263554020904293",
    mid: "4263554020904293",
    max_id_type: "0"
  },
  function(data) {
    console.log(data);
  }
);

if (module.hot) {
  // 檢測是否有模塊熱更新
  module.hot.accept("./vendor/sum.js", function() {
    // 針對被更新的模塊, 進(jìn)行進(jìn)一步操作
    console.log("/vendor/sum.js is changed");
  });
}

在命令行鍵入：npm run dev開啟服務(wù)器后，會自動打開瀏覽器。如下圖所示：

打開控制臺，可以看到代碼都正常運行沒有出錯。除此之外，由于開啟了source-map，所以可以定位代碼位置（下圖綠框內(nèi)）：

dev-server 文檔: https://www.webpackjs.com/configuration/dev-server/

開發(fā)模式 文檔:https://www.webpackjs.com/guides/development/