webpack-dev-server，模块化开发神器

不需要你知道任何东西，webpack-dev-server非常适合你作为新手脚手架，让你体验一把工程化开发、模块化开发的便利。

webpack-dev-server 是个什么东西？

webpack-dev-server就是一个基于Node.js和webpack的一个简易服务器。它在服务器端使用webpack-dev-middleware进行webpack构建打包；并在客户端注入一份runtime，用于接受服务器端的构建打包后信息。

只需要提供一份简单的webpack配置文件，在命令行中运行wbepack-dev-server即可运行起来。

var path = require("path");

module.exports = {
    entry: {
        // 以./app/main.js作为入口文件，构建输出app.js
        app: ["./app/main.js"]
    },
    output: {
        // 将构建打包输出的app.js放到build目录下
        path: path.resolve(__dirname, "build"),
        // webpack构建输出的临时文件存放到内存中，而且是以publicPath作为相对路径。
        // publicPath并不会影响输出目录
        // 此外，如果指定路径下已经存在了相同文件，webpack会优先使用内存的临时文件
        publicPath: "/assets/",
        // 可以对构建输出的app.js进行二次定制化命名，比如加时间戳等
        filename: "[name].js"
    }
};

上面这份配置告诉webpack如何进行模块化管理，如何打包输出，我们就可以通过localhost:[port]/assets/bundle.js访问到构建后的打包文件。

也就是说，webpack-dev-server底层一方面使用webpack在服务器端进行构建打包，一方面在客户端注入runtime以便和服务器端建立联系。显然，我们提供的webpack.config.js文件是提供给webpack的，也就是说想要做更多的构建任务，对webpack配置文件进行修改即可。

那么，webpack-dev-server还提供了什么牛逼的功能呢？

webpack-dev-server 还有哪些牛逼的功能？

自动刷新

顾名思义，就是监听到改动是自动刷新页面，webpack-dev-server支持两种模式的自动刷新。

iframe模式

使用iframe模式并不需要多余的配置，直接访问http://[host]:[port]/webpack-dev-server/[path]即可，iframe模式的特征如下：
✦ 无需额外的配置
✦ 顶部条可以显示编译信息
✦ 浏览器的地址不会跟着页面URL变动

inline模式

简单配置可以开启，然后直接访问http://[host]:[port]/[path]即可，inline模式的特征如下：
✦ 需要额外的配置
✦ 编译信息只能在命令行和浏览器console中查看
✦ 浏览器的地址和页面URL同步

前文提到的简单配置到底有多简单呢？如下两种方式均可：
➙ 在命令行中指定--inline参数，比如：webpack-dev-server --inline
➙ 在webpack.config.js配置文件中添加devServer: {inline: true}

除了这两种简单的配置外，还有一种稍微“复杂”的配置，那就是结合Node.js使用，显然，结合Node.js更具有通用型，虽然复杂，我也得介绍一下。

var config = require("./webpack.config.js");
// 就是这么“复杂”！
// 往webpack的入口配置中加入 webpack-dev-server/client?http://localhost:8080/ 即可
config.entry.app.unshift(
  "webpack-dev-server/client?http://localhost:8080/"
);

var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {

});
server.listen(8080);

其实自动刷新并没有很牛逼，好多其他工具也可以做到，而且有时候频繁自动刷新也不是我们想要的。

热替换

热替换是比自动刷新更牛逼的功能，也是为啥我稀罕webpack-dev-server的原因，有了它，某些场景下，可以在不刷新页面的情况下让代码生效，是不是很神奇？配合React简直碉堡了！

那么怎么开启热替换功能？热替换又适合什么场景呢？

开启热替换功能

结合不同的使用场景，主要有两种方式可以开启热替换功能。

➙ 在命令行中指定--hot参数
值得注意的时候，这种开启方式只适合inline模式，也就是说，你必须同时结合inline模式使用：webpack-dev-server --inline --hot。
然后直接访问http://«host»:«port»/«path»即可。

Paste_Image.png

其中[HMR]就是热替换的输出信息。

➙ 结合Node.js使用
这个就稍微复杂一下，结合代码看：

var config = require("./webpack.config.js");
// 1. 给app入口添加webpack/hot/dev-server
// 注意：前面那一串是什么鬼？那是Node.js开启inline模式的方式
config.entry.app.unshift(
  "webpack-dev-server/client?http://localhost:8080/", 
  "webpack/hot/dev-server"
);

var compiler = webpack(config);
var server = new webpackDevServer(compiler, {
    // 2. 开启热替换模式
    // 注意：这个参数不是webpack的参数，是webpack-dev-server的参数
    hot: true
});
server.listen(8080);

除了上面注释中的两个工作之外，还需要在webpack.config.js文件中添加一小行代码：new webpack.HotModuleReplacementPlugin()。

无论以上哪种方式，本质上都是将一个特殊的webpack/hot/dev-serer入口添加到webpack的配置中，其实也就是往客户端的js文件注入了一些代码。

代理

这个话题就不展开了，大概就是为了解决跨域问题、模拟数据、对第三方请求的拦截转发等。功能很强大，但是实际项目中，我更推荐和第三方应用整合在一起，如果单纯的前端开发或者前端demo可以尝试代理。

那么，怎么和后台应用整合在一起呢？

怎么和后台应用整合？

实际项目中，尤其是多页应用，都会用后台的语法去“套页面”，而这个套出来的页面，严重依赖后台的运行环境，前端环境是没办法单独运行的。
所以，我们常用的方案就是将前端应用和后台应用隔离开，前端应用构建输出到后台应用，也就是我们需要将webpack-dev-server整合到后台应用中去。

为了整合webpack-dev-server和后台应用，我们需要实现以下功能：
✦ webpack生成的JS/CSS等资源需要指向webpack-dev-server。配置一个完整的output.publicPath链接即可。
✦ 后台应用生成的HTML页面中的script需要指向webpack-dev-server。修改HTML的script即可。
✦ 我们需要建立webpack-dev-server和runtime的连接，以便自动刷新等。inline模式会自动建立webpack-dev-server和runtime的连接，并不需要额外的配置。iframe模式稍微复杂一丢丢，需要配置--content-base参数指向后台应用。

具体到项目中，按以下步骤就好了：
➙ 假如webpack-dev-server端口为8080，后台应用的端口为9090。
➙ 修改webpack的output.publicPath配置为：http://localhost:8080/assets/
➙ 修改HTML的script标签指向：http://localhost:8080/assets/bundle.js
➙ 建立webpack-dev-server和runtime之间的联系，inline模式或者iframe模式

总结点什么？

webpack-dev-server是一个模块化开发的解决方案，他封装了webpack，并作为一个简易的Node.js服务器供静态开发使用。虽然起步稍微复杂一些，但是环境搭好之后，无论对于新手还是老手，开发体验提升很大，对于工程化开发有很大的帮助。

➙ webpack-dev-server就是一个基于Node.js和webpack的一个简易服务器，它在服务器端进行构建打包。
➙ webpack-dev-server代码中注入了一份runtime，来建立webpack-dev-server和客户端的联系。
➙ webpack-dev-server和客户端建立联系之后，可以做很多厉害的事情，比如自动刷新、热替换等。
➙ webpack-dev-server还提供了代理功能，代理有很多应用场景，举几个简单的例子：本地数据接口模拟、远端接口调试、分拆接口到不同的远端服务器等。
➙ 实际项目中，我们可以使用代理来整合前端项目和后台项目，也可以使用两个项目并行的方式来整合，也就是直接建立前端项目和后段项目的联系。这个方案对于多页应用更具有通用性。
➙ webpack-dev-server还有一些自己的配置项。

一旦用上webpack-dev-server，你会发现本地开发体验有了极大的提升。强烈建议试试。