webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时.
配置(webpack.config.js):
var path = require("path");
module.exports = {
entry: {
app: ["./app/main.js"]
},
output: {
path: path.resolve(__dirname, "build"),
publicPath: "/assets/",
filename: "bundle.js"
}
};
你有一个app文件夹下的初始化入口文件，并打包成build.js文件到build文件夹。
webpack-dev-server可以通过NPM命令安装
$ npm install webpack-dev-server.
当前目录
webpack-dev-server会默认会指定当前目录为基本目录，除非你指定了基本目录。
$ webpack-dev-server --content-base build/
使用当前命令，webpack-dev-server将会服务于静态文件到build文件夹。服务器将会监听源文件，无论何时文件改变，都将重新编译。
被修改的包将会从内存中保存到在publicPath指定的相对目录中，这个将不会被输出到指定的output目录中。如果一个包已经存在于同一URL路径中，则内存中的包优先.
使用上述这种配置，包能够在以下路径中找到，localhost:8080/assets/bundle.js。
加载你的包文件，你需要在你指定的静态文件夹build中创建一个index.html文件(--content-base option)，以下是例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="assets/bundle.js"></script> </body> </html>
在默认配置下，前往localhost:8080/来启动你的应用，配置中的资源目录，前往localhost:8080/assets。
自动刷新
webpack-dev-server支持多种模式来自动刷新页面：
每个模式都支持Hot Module Replacement.在Hot Module Replacement中，包会通知改变发生，Hot Module Replacemen将会加载更新的模块并且注入到运行的应用程序中。
使用iframe mode不需要更多的配置，只需要跳转到
http://?host?:?port?/webpack-dev-server/?path?.
根据上述配置：http://localhost:8080/webpack-dev-server/index.html.
Inline mode
使用inline mode，也需要：
这将添加webpack-dev-server客户端入口到webpack配置中。这没必要在url中改变，只需要跳转到http://?host?:?port?/?path?.
根据上述配置：http://localhost:8080/index.html.
原文：http://www.cnblogs.com/liuwenjian/p/6284544.html