Development

本部分内容，会涉及到三种开发工具。
需要注意的是，不要再产品发布环境下使用这些工具

设置编辑器

一些编辑器默认会开启safe write模式，开启这种模式后，保存文件后不会同步进行编译。
常用编辑器的配置。

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

当js抛出异常时，需要定位产生问题的代码。由于webpack打包后会将代码打包到一个或多个bundle文件，所以是没办法直接定位到产生问题的代码的。

Source Maps就是为了解决该问题的。关于Source Map的配置参数有很多详细配置，每个配置都有对应的优势和劣势。
通过下面的方式进行source map的配置
devtool: "cheap-eval-source-map"

Choosing a Tool

webpack提供watch mode,基于这种模式，webpack会监控文件，并在文件改变的时候进行重新编译。webpack-dev-server提供方便的开发server实现实时刷新(live reload).
如果你已经有了开发的部署server，可以使用webpack-dev-middle，从而让开发构建更灵活。

webpack-dev-server，webpack-dev-middleware会将打包后的代码保存在内存中，
不会将文件写到磁盘。这样会让编译更快并且不会在本地磁盘创建很多编译调试过程中的无用文件。
大部分场景都可以使用webpack-dev-server,因为这种方式更简单，是一种开箱即用的工具。

webpack Watch Mode

webpack watch mode会检测文件的改变。如果检测到了文件变化，会自动再次进行编译。
使用下面的命令，可以在编译打印出比较直观的进度
webpack --progress --watch
Wathch mode不会假定使用何种server，所以需要自己添加server。
为了简单可以使用serve,执行'npm bin'/serve
可以创建一个server，来负责响应请求。

注意，使用serve做为服务器，当改变文件，自动重新编译后，是不会重新自动刷新界面的。

Watch Mode with Chrome DevTools Workspaces

如果在chrome中设置了persist changes when saving from the Sources panel，那就不需要手动刷新页面了。
需要做如下设置

devtool: "inline-source-map"

使用chrome workspace watch模式会有一些限制:

大文件(超过1M)在重新编译的时候，页面会变成空白页，需要手动刷新页面。
小文件会比大文件编译快，因为inline-source-map将原文件做base64编译的速度会比较慢。

webpack-dev-server

webpack-dev-server提供了带自动刷新功能的server服务器。
首先需要确定有index.html文件引用了bundle.js文件。
假设output.filename为bundle.js

<script src="/bundle.js"></script>

通过npm安装webpack-dev-server

npm install webpack-dev-server --save-dev

安装完成后启动

webpack-dev-server --open

上面的命令会默认打开浏览器访问http://localhost:8080
通过使用webpack-dev-server有了live reload的能力。
更深入的可以使用Hot Module Replacement.
该接口可以用来在不刷新页面的情况下切换module。更多内容参考config HMR

默认情况下webpack-dev-server使用inline mode.该模式会想bundle.js中注入用来实时刷新及显示编译错误的代码。使用inline mode将会在DevTools命令行中看到构建错误及警告。

webpack-dev-server可以做更多事情，比如将请求代理到后台服务器，更多配置参数参考devServer配置

webpack-dev-middleware

webpack-dev-middleware适用于机遇链接的middleware stacks。
该middleware在已有Node.js server或想完全控制server的场景下用处很大。
该middleware会将webpack的编译文件存放于内存中。当webpack处于编译期时，
将会延迟请求，在编译结束后会执行该请求，返回对应内容。

该middleware主要提供给高级用户使用，简单使用推荐使用webpack-dev-server

使用npm对该middleware进行安装。
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!");
});

执行上面的代码，根据output.publicPath和output.filename中的配置，就可以进行访问。http://localhost:3000/bundle.js

默认情况下，webpack-dev-middleware会使用watch mode。
也可以指定使用lazy mode.使用lazy mode仅仅会对请求的文件进行重新编译。
设置lazy mode。

app.use(webpackDevMiddleware(compiler, {
  lazy: true,
  filename: "bundle.js" // Same as `output.filename` in most cases.
}));

更多的内容参考dev server

Webpack Development