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

4,640

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

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

webpack-dev-server就是一个基于Node.jswebpack的一个简易服务器。它在服务器端使用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-serverruntime的连接,以便自动刷新等。inline模式会自动建立webpack-dev-serverruntime的连接,并不需要额外的配置。iframe模式稍微复杂一丢丢,需要配置--content-base参数指向后台应用。

具体到项目中,按以下步骤就好了:
➙ 假如webpack-dev-server端口为8080,后台应用的端口为9090。
➙ 修改webpackoutput.publicPath配置为:http://localhost:8080/assets/
➙ 修改HTML的script标签指向:http://localhost:8080/assets/bundle.js
➙ 建立webpack-dev-serverruntime之间的联系,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,你会发现本地开发体验有了极大的提升。强烈建议试试。