Development
本部分內(nèi)容，會(huì)涉及到三種開發(fā)工具舞虱。
需要注意的是气嫁，不要再產(chǎn)品發(fā)布環(huán)境下使用這些工具
設(shè)置編輯器
一些編輯器默認(rèn)會(huì)開啟safe write模式，開啟這種模式后冗疮，保存文件后不會(huì)同步進(jìn)行編譯萄唇。
常用編輯器的配置。
- Sublime Text 3
Add "atomic_save": false to your user preferences. - IntelliJ
use search in the preferences to find "safe write" and disable it. - Vim
add :set backupcopy=yes in your settings. - WebStorm
uncheck Use "safe write" in Preferences > Appearance & Behavior > System Settings
Source Maps
當(dāng)js拋出異常時(shí)术幔，需要定位產(chǎn)生問題的代碼另萤。由于webpack打包后會(huì)將代碼打包到一個(gè)或多個(gè)bundle文件，所以是沒辦法直接定位到產(chǎn)生問題的代碼的诅挑。
Source Maps就是為了解決該問題的四敞。關(guān)于Source Map的配置參數(shù)有很多詳細(xì)配置，每個(gè)配置都有對(duì)應(yīng)的優(yōu)勢(shì)和劣勢(shì)拔妥。
通過下面的方式進(jìn)行source map的配置
devtool: "cheap-eval-source-map"
Choosing a Tool
webpack提供watch mode,基于這種模式忿危，webpack會(huì)監(jiān)控文件，并在文件改變的時(shí)候進(jìn)行重新編譯没龙。webpack-dev-server提供方便的開發(fā)server實(shí)現(xiàn)實(shí)時(shí)刷新(live reload).
如果你已經(jīng)有了開發(fā)的部署server癌蚁，可以使用webpack-dev-middle，從而讓開發(fā)構(gòu)建更靈活兜畸。
webpack-dev-server努释，webpack-dev-middleware會(huì)將打包后的代碼保存在內(nèi)存中，
不會(huì)將文件寫到磁盤咬摇。這樣會(huì)讓編譯更快并且不會(huì)在本地磁盤創(chuàng)建很多編譯調(diào)試過程中的無用文件伐蒂。
大部分場(chǎng)景都可以使用webpack-dev-server,因?yàn)檫@種方式更簡(jiǎn)單，是一種開箱即用的工具肛鹏。
webpack Watch Mode
webpack watch mode會(huì)檢測(cè)文件的改變逸邦。如果檢測(cè)到了文件變化，會(huì)自動(dòng)再次進(jìn)行編譯在扰。
使用下面的命令缕减，可以在編譯打印出比較直觀的進(jìn)度
webpack --progress --watch
Wathch mode不會(huì)假定使用何種server，所以需要自己添加server芒珠。
為了簡(jiǎn)單可以使用serve,執(zhí)行'npm bin'/serve
可以創(chuàng)建一個(gè)server桥狡，來負(fù)責(zé)響應(yīng)請(qǐng)求。
注意，使用serve做為服務(wù)器裹芝，當(dāng)改變文件部逮，自動(dòng)重新編譯后，是不會(huì)重新自動(dòng)刷新界面的嫂易。
Watch Mode with Chrome DevTools Workspaces
如果在chrome中設(shè)置了persist changes when saving from the Sources panel兄朋，那就不需要手動(dòng)刷新頁(yè)面了。
需要做如下設(shè)置
devtool: "inline-source-map"
使用chrome workspace watch模式會(huì)有一些限制:
- 大文件(超過1M)在重新編譯的時(shí)候怜械，頁(yè)面會(huì)變成空白頁(yè)颅和，需要手動(dòng)刷新頁(yè)面。
- 小文件會(huì)比大文件編譯快缕允，因?yàn)?code>inline-source-map將原文件做base64編譯的速度會(huì)比較慢峡扩。
webpack-dev-server
webpack-dev-server提供了帶自動(dòng)刷新功能的server服務(wù)器。
首先需要確定有index.html文件引用了bundle.js文件灼芭。
假設(shè)output.filename為bundle.js
<script src="/bundle.js"></script>
通過npm安裝webpack-dev-server
npm install webpack-dev-server --save-dev
安裝完成后啟動(dòng)
webpack-dev-server --open
上面的命令會(huì)默認(rèn)打開瀏覽器訪問http://localhost:8080
通過使用webpack-dev-server有了live reload的能力有额。
更深入的可以使用Hot Module Replacement.
該接口可以用來在不刷新頁(yè)面的情況下切換module般又。更多內(nèi)容參考config HMR
默認(rèn)情況下webpack-dev-server使用inline mode.該模式會(huì)想bundle.js中注入用來實(shí)時(shí)刷新及顯示編譯錯(cuò)誤的代碼彼绷。使用inline mode將會(huì)在DevTools命令行中看到構(gòu)建錯(cuò)誤及警告。
webpack-dev-server可以做更多事情茴迁，比如將請(qǐng)求代理到后臺(tái)服務(wù)器寄悯，更多配置參數(shù)參考devServer配置
webpack-dev-middleware
webpack-dev-middleware適用于機(jī)遇鏈接的middleware stacks。
該middleware在已有Node.js server或想完全控制server的場(chǎng)景下用處很大堕义。
該middleware會(huì)將webpack的編譯文件存放于內(nèi)存中猜旬。當(dāng)webpack處于編譯期時(shí)，
將會(huì)延遲請(qǐng)求倦卖，在編譯結(jié)束后會(huì)執(zhí)行該請(qǐng)求洒擦，返回對(duì)應(yīng)內(nèi)容。
該middleware主要提供給高級(jí)用戶使用怕膛，簡(jiǎn)單使用推薦使用webpack-dev-server
使用npm對(duì)該middleware進(jìn)行安裝熟嫩。
npm install express webpack-dev-middleware --save-dev
安裝之后可以如下使用該middleware
var express = require("express");
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpack = require("webpack");
var webpackConfig = require("./webpack.config");
var app = express();
var compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler, {
publicPath: "/" // Same as `output.publicPath` in most cases.
}));
app.listen(3000, function () {
console.log("Listening on port 3000!");
});
執(zhí)行上面的代碼，根據(jù)output.publicPath和output.filename中的配置褐捻，就可以進(jìn)行訪問掸茅。http://localhost:3000/bundle.js
默認(rèn)情況下，webpack-dev-middleware會(huì)使用watch mode柠逞。
也可以指定使用lazy mode.使用lazy mode僅僅會(huì)對(duì)請(qǐng)求的文件進(jìn)行重新編譯昧狮。
設(shè)置lazy mode。
app.use(webpackDevMiddleware(compiler, {
lazy: true,
filename: "bundle.js" // Same as `output.filename` in most cases.
}));
更多的內(nèi)容參考dev server
