webpack-dev-server 一些理解

webpack-dev-server 可通过命令行方式和 NodeJS 方式启动；但我觉得两种启动方式的差异蛮大的，容易对新人造成误解，可以对这两种启动方式分开理解。

一、命令行启动
npm-run webpack-dev-server --content-base build --port 9999 --inline --hot

1. 对 content-base 的理解：content-base 指的是 server 服务的目录，即只有该目录下的内容才是可访问的（还有 publicPath 哈），但是 content-base 目录发生的修改不会触发热加载。能触发热加载的只有 webpack 关注的目录。对 content-base 目录进行修改后重新刷新页面即可。
2. 命令行启动 webpack-dev-server 时，webpack-dev-server 会根据 webpack.config.js 的内容作出相应的动作。比如：设置 webpack.config.js 字段 devServer: { inline: true }，则相当于通过命令行 --inline 参数启动（--inline 热加载-刷新页面）。但是，同样的配置文件通过 NodeJS 直接启动时却是不行的。另一个容易困惑的点就是：在配置文件中设置了 output.publicPath，通过命令行启动时，完美运行，通过 NodeJS 启动时就报错呢，找不到文件？其实原因就是通过 NodeJS 启动时，new WebpackDevServer 产生的 server 是不知道 webpack.config.js 的内容，我们必须自己去配置它，所以 var server = new WebpackDevServer(compiler, { publicPath: '/assets/' }); 就可以了。

二、NodeJS 启动

1. 解析 NodeJS 启动 inline mode 的两种方式。
   第一种方式：

var config = require("./webpack.config.js");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {...});
server.listen(8080);

第二种方式：

var config = require("./webpack.config.js");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {...});
server.listen(8080);
// 然后在 html 文件中添加
<script src="http://localhost:8080/webpack-dev-server.js"></script>
// http://localhost:8080 可以删掉不要

分析：在 server.listen() 执行后 server 会生成 /webpack-dev-server.js 文件，该文件就是 webpack-dev-server/client。但是为什么第一种方式需要加上参数 ?http://localhost:8080/ 呢？因为 webpack 打包 config 必须指明，且 config 是访问不到 server.port 的；而 server.listen 后 server 生成的 webpack-dev-server.js 它已经知道端口号了。

三、重点理解

• publicPath: 会把本该生成在 webpack 配置文件的 outputPath.path 下的内容全部生成到 publichPath 内存路径中。通过 NodeJS 启动时需重新配置，且可以不与配置文件的 output.publicPath 字段相同。命令行启动时若不设置，则会默认 server.publicPath = output.publicPath。
• 为什么用 webpack-dev-server 启动后，改变源代码，控制台显示重新编译了，但 output.path 下对应的 bundle 却没有改变？原因是 webpack-dev-server 启动后默认只是把 webpack 重新编译的内容输出到 server.publicPath 内存去了。如果需要改变 bundle 文件内容，需要再通过 NodeJS 启动 webpack。