原文地址：https://webpack.js.org/guides/development/
翻譯：xiyoki
Development（開發(fā)）
本頁將解釋如何開始開發(fā)，以及如何選擇三個工具中的一個來開發(fā)。
假設(shè)你已經(jīng)有了一個webpack配置文件冰垄。
Adjusting Your Text Editor（調(diào)整你的文本編輯器）
一些文本編輯器有一個 "safe write"功能园爷，并且默認是啟用的定铜。因此揍堰，點擊保存文件并不會使得文件被重新編譯哄芜。
對不同的編輯器禁用該功能的方式是不同樟蠕。下面是針對最常見的編輯器的設(shè)置：
-
Sublime Text 3 - Add
"atomic_save": falseto your user preferences. - IntelliJ - use search in the preferences to find "safe write" and disable it.
-
Vim - add :
set backupcopy=yesin your settings. -
WebStorm - uncheck Use
"safe write"in Preferences > Appearance & Behavior > System Settings
Source Maps
當JavaScript出現(xiàn)異常贮聂，你會想知道哪個文件，哪一行產(chǎn)生了這個錯誤寨辩。由于webpack輸出files到一個或多個bundle中吓懈，跟蹤文件就不太方便。
Source maps 致力于解決這個問題靡狞。這里有不同的選項耻警，每個選項既有優(yōu)點也有缺點。為了開始甸怕，你可以選用這個：
devtool: "cheap-module-source-map"
devtool還有其他值供你選擇甘穿，詳見配置項devtool。
Choosing a Tool（選擇一個工具）
這里有三個工具供你選擇：
- watch mode：在這個mode中梢杭，webpack將會watch你的files, 并在文件改變時重新編譯扒磁。
- webpack-dev-server：webpack-dev-server提供了一個易使用，并能快速刷新瀏覽器的development server式曲。
- webpack-dev-middleware：如果你已經(jīng)有了一個development server妨托，并且想要全部的靈活性, webpack-dev-middleware可以被當做一個中間件來使用缸榛。
在大多數(shù)情況下静暂，你會想要使用webpack-dev-server蔽莱，因為使用它開始是最容易的，并且它也提供了很多盒子之外（ out-of-the-box）的功能制轰。
webpack Watch Mode
...略敦腔。詳情請查看原文均澳。
webpack-dev-server
webpack-dev-server提供了一個server，以及l(fā)ive reloading（自動加載）的功能符衔。它很容易設(shè)置找前。
準備工作： 確保你有一個index.html文件，打包后的文件內(nèi)嵌其中判族。 假設(shè)output.filename是bundle.js:
<script src="/bundle.js"></script>
開始通過npm安裝webpack-dev-server:
npm install webpack-dev-server --save-dev
當安裝完成躺盛，你應(yīng)當像這樣使用webpack-dev-server:
webpack-dev-server --open
如果你的控制臺報告找到不到這個命令，那么就嘗試運行
node_modules/.bin/webpack-dev-server --open形帮。最佳方式是將這個命令添加進package.json, 就像這樣:
"scripts": { "start": "webpack-dev-server --open" }
上述命令會自動在http://localhost:8080下打開你的瀏覽器槽惫。
Make a change in one of your files and hit save. You should see that the console is recompiling. After that's done, the page should be refreshed. If nothing happens in the console, you may need to fiddle with watchOptions
.
Now you have live reloading working, you can take it even a step further: Hot Module Replacement. This is an interface that makes it possible to swap modules without a page refresh. Find out how to configure HMR.
個人補充：如果只需實現(xiàn)React模塊的熱加載，那么使用Babel中的
react-transform-hrm插件辩撑，可以在不對React模塊進行額外配置的前提下讓HMR正常工作界斜，即可以更方便的實現(xiàn)React模塊的熱加載。
具體操作：
- 第一步：安裝react-transform-hmr
cnpm install --save-dev babel-plugin-react-transform react-transform-hmr
- 第二步：在webpack配置文件中添加HMR插件合冀，并在Webpack Dev Server中添加“hot”參數(shù)各薇；
//webpack.config.js
var webpack = require("webpack");
module.exports = {
...
plugins: [
...
new webpack.HotModuleReplacementPlugin()//熱加載插件
],
devServer: {
...
hot: true
}
}
- 第三步：配置Babel
//.babelrc
{
"presets": ["react", "es2015"],
"env": {
"development": {
"plugins": [["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}]]
}
}
}
詳細參考zhangwang翻譯的這篇文章
默認使用inline模式 。This mode injects the client - needed for live reloading and showing build errors - in your bundle. With inline mode you will get build errors and warnings in your DevTools console. more information about inline.
webpack-dev-server可以做更多的事君躺，比如為后端server代理請求(proxying requests) 得糜。更多配置選項，查看devServer documentation晰洒。
webpack-dev-middleware
...略朝抖。詳情請查看原文。
