webpack-dev-server使用说明

ts2009

　　1、webpack-dev-server默认会以当前目录为基本目录,除非你制定它.



webpack-dev-server --content-base build/

　　上述命令是在命令行中执行的,它将build目录作为根目录.
　　2、webpack-dev-server生成的包并没有放在你的真实目录中,而是放在了内存中.
　　3、webpack-dev-server支持两种模式来自动刷新页面.
　　iframe模式(页面放在iframe中,当发生改变时重载)
inline模式(将webpack-dev-sever的客户端入口添加到包(bundle)中)
两种模式都支持热模块替换(Hot Module Replacement).热模块替换的好处是只替换更新的部分,而不是页面重载.
　　4、
　　iframe模式
使用这种模式不需要额外的配置,只需要以下面这种URL格式访问即可
　　http://«host»:«port»/webpack-dev-server/«path»
例如:http://localhost:8080/webpack...
　　inline模式
inline模式下我们访问的URL不用发生变化,启用这种模式分两种情况:
　　1 当以命令行启动webpack-dev-server时,需要做两点：
　　在命令行中添加--inline命令
在webpack.config.js中添加devServer:{inline:true}
2 当以Node.js API启动webpack-dev-server时,我们也需要做两点:
　　由于webpack-dev-server的配置中无inline选项,我们需要添加webpack-dev-server/client?http://«path»:«port»/到webpack配置的entry入口点中.
将<script src="http://localhost:8080/webpack-dev-server.js"></script>添加到html文件中



var config = require("./webpack.config.js");
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
contentBase:'build/',
publicPath: "/assets/"
});
server.listen(8080);
　　在Node中运行上面的代码即可。
　　注意：webpack配置中的devSever配置项只对在命令行模式有效。
　　更多参考：https://segmentfault.com/a/1190000006964335