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

不需要你知道任何东西,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»即可。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 143,048评论 1 300
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 61,330评论 1 256
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 94,541评论 0 213
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 41,042评论 0 176
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,821评论 1 255
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,795评论 1 176
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,413评论 2 271
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,173评论 0 167
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 28,994评论 6 229
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,525评论 0 213
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,327评论 2 215
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,648评论 1 230
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,248评论 0 31
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,142评论 2 214
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,521评论 3 204
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,622评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,025评论 0 166
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,543评论 2 230
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,636评论 2 231

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,074评论 7 35
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,002评论 18 139
  • webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 6,287评论 2 71
  • 构建一个小项目——FlyBird,学习webpack和react。(本文成文于2017/2/25) 从webpac...
    布蕾布蕾阅读 16,725评论 31 98
  • webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev...
    tsyeyuanfeng阅读 70,508评论 15 73