webpack4 系列教程(十五):開發模式與webpack-dev-server
作者按:因為教程所示圖片使用的是 github 倉庫圖片,網速過慢的朋友請移步《webpack4 系列教程(十五):開發模式與 webpack-dev-server》原文地址。更歡迎來我的小站看更多原創內容:godbmw.com,進行“姿勢”交流 ♪(^∇^*)
0. 課程介紹和資料
本節課的程式碼目錄如下:
本節課用的 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" } }
1. 為什麼需要開發模式?
在之前的課程中,我們都沒有指定引數mode
。但是執行webpack
進行打包的時候,自動設定為production
,但是控制檯會爆出warning
的提示。而開發模式就是指定mode
為development
。
在開發模式下,我們需要對程式碼進行除錯。對應的配置就是:devtool
設定為source-map
。在非開發模式下,需要關閉此選項,以減小打包體積。
在開發模式下,還需要熱過載、路由重定向、掛代理等功能,webpack4
已經提供了devServer
選項,啟動一個本地伺服器,讓開發者使用這些功能。
2. 如何使用開發模式?
根據文章開頭的package.json
npm run dev
即可啟動開發者模式。
啟動效果如下圖所示:
雖然控制檯輸出了打包資訊(假設我們已經配置了熱過載),但是磁碟上並沒有建立/dist/
資料夾和打包檔案。控制檯的打包檔案的相關內容是儲存在記憶體之中的。
3. 編寫一些需要的檔案
首先,編寫一下入口的 html 檔案:
<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> This is Index html </body> </html>
然後,按照專案目錄,簡單封裝下/vendor/
下的三個 js 檔案,以方便app.js
呼叫:
// 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;
}
好了,準備進入正題。
4. 編寫 webpack 配置檔案
4.1 配置程式碼
由於配置內容有點多,所以放程式碼,再放講解。
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", // 開發模式
devtool: "source-map", // 開啟除錯
devServer: {
contentBase: path.join(__dirname, "dist"),
port: 8000, // 本地伺服器埠號
hot: true, // 熱過載
overlay: true, // 如果程式碼出錯,會在瀏覽器頁面彈出“浮動層”。類似於 vue-cli 等腳手架
proxy: {
// 跨域代理轉發
"/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"
})
]
};
4.2 模組熱更新
模組熱更新需要HotModuleReplacementPlugin
和NamedModulesPlugin
這兩個外掛,並且順序不能錯。並且指定devServer.hot
為true
。
有了這兩個外掛,在專案的 js 程式碼中可以針對偵測到變更的檔案並且做出相關處理。
比如,我們啟動開發模式後,修改了vendor/sum.js
這個檔案,此時,需要在瀏覽器的控制檯列印一些資訊。那麼,app.js
中就可以這麼寫:
if (module.hot) {
// 檢測是否有模組熱更新
module.hot.accept("./vendor/sum.js", function() {
// 針對被更新的模組, 進行進一步操作
console.log("/vendor/sum.js is changed");
});
}
每當sum.js
被修改後,都可以自動執行回撥函式。
4.3 跨域代理
隨著前後端分離開發的普及,跨域請求變得越來越常見。為了快速開發,可以利用devServer.proxy
做一個代理轉發,來繞過瀏覽器的跨域限制。
按照前面的配置檔案,如果想呼叫微博的一個介面:https://m.weibo.cn/comments/hotflow
。只需要在程式碼中對/comments/hotflow
進行請求即可:
$.get(
"/comments/hotflow",
{
id: "4263554020904293",
mid: "4263554020904293",
max_id_type: "0"
},
function(data) {
console.log(data);
}
);
4.4 HTML5--History
當專案使用HTML5 History API
時,任意的 404 響應都可能需要被替代為 index.html
。
在 SPA(單頁應用)中,任何響應直接被替代為index.html
。
在 vuejs 官方的腳手架vue-cli
中,開發模式下配置如下:
// ...
historyApiFallback: {
rewrites: [{ from: /.*/, to: "/index.html" }];
}
// ...
5. 編寫入口檔案
最後,在前面所有的基礎上,讓我們來編寫下入口檔案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() {
// 針對被更新的模組, 進行進一步操作
console.log("/vendor/sum.js is changed");
});
}
6. 效果檢測
在命令列鍵入:npm run dev
開啟伺服器後,會自動開啟瀏覽器。如下圖所示:
開啟控制檯,可以看到程式碼都正常執行沒有出錯。除此之外,由於開啟了source-map
,所以可以定位程式碼位置(下圖綠框內):
7. 參考資料
- dev-server 文件: https://www.webpackjs.com/configuration/dev-server/
- 開發模式 文件:https://www.webpackjs.com/guides/development/