webpack开发工具webpack-dev-server使用指南

使用初步

1. 安装webpack-dev-server：
   在项目目录下执行，npm install webpack-dev-server -g
2. 运行 webpack-dev-server

自动刷新

有两种模式自动刷新页面：
* Iframe mode （网页是内嵌在一个iframe中的）
* Inline mode （将一个小的webpack-dev-server客户端条目添加到包，以更新页面）
每种模式都支持Hot Module Replacement。在Hot Module Replacement中，会通知bundle发生更改（而不是重新加载整个页面）,Hot Module Replacement运行时可以加载更新的模块并将它们注入正在运行的应用程序。

iframe mode

使用iframe mode不需要多余的配置，只需要在浏览器中浏览http://«host»:«port»/webpack-dev-server/«path».
特征：
* 不需要使用任何配置
* 信息条展示在你应用的上方
* 因为是内嵌在iframe中，url的变化不会反应在你的浏览器中

inline mode

使用这种模式，你有两种方式：
1. 在命令行中指定–inline
webpack-dev-server --inline
2. 在webpack.config.js中设置devServer: { inline: true }
这会将webpack-dev-server客户端入口点添加到webpack配置中，url没有发生改变，只需要浏览：http://«host»:«port»/«path»

使用支持“安全写(safe write)”的编辑器

请注意：很多编辑器都支持”安全写(safe write)”功能，而且默认是开启的，这会导致webpack-dev-server不能够正确地监听文件。”safe write”意味着文件的更改不会直接写入到原始文件，而是会先写入到一个临时文件中，当保存操作成功完成时，将重命名并替换原始文件。这种行为会导致文件监听器失去跟踪目标，因为原始文件已经被移除掉了。为了防止此类事件，必须关闭你编辑器中的“safe write”特性。
* VIM - set:set backupcopy=yes (文档)
* IntelliJ - Settings ▶︎ System Settings ▶︎ Synchronization ▶︎ disable safe write (may differ in various IntelliJ IDEs, but you can still use the search feature)
笔者用的编辑器是webstorm，和IntelliJ都是属于jetbrains旗下的编辑器，设置和IntelliJ一样。其他支持“safe write”的编辑器，应该在网上可以搜到设置“safe write”的方法。

在webpack配置文件中配置

在webpack.config.js中有个devServer属性，可以对webpack-dev-server进行配置，比如端口，打开路径等。devServer: {
contentBase: './dist',
port: 8000,
inline: false,
open: 'http://localhost:8000/#/'
}