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»便可。

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

其中[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，你会发现本地开发体验有了极大的提高。强烈建议试试。