不需要你知道任何东西,webpack-dev-server 非常适合你作为新手脚手架,让你体验一把工程化开发,模块化开发的便利.
webpack-dev-server 是个什么东西?
webpack-dev-server 就是一个基于 Node.js 和 webpack 的一个简易服务器.它在服务器端使用
webpack - dev - middleware
进行 webpack 构建打包;并在客户端注入一份 runtime,用于接受服务器端的构建打包后信息.
只需要提供一份简单的 webpack 配置文件,在命令行中运行 wbepack-dev-server 即可运行起来.
上面这份配置告诉 webpack 如何进行模块化管理,如何打包输出,我们就可以通过
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"
}
};
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 使用
这个就稍微复杂一下,结合代码看:
除了上面注释中的两个工作之外,还需要在 webpack.config.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);
无论以上哪种方式,本质上都是将一个特殊的
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,你会发现本地开发体验有了极大的提升.强烈建议试试.
来源: https://juejin.im/entry/5a5b6da36fb9a01ca267746b