webpack之webpack-dev-server的使用

本文介绍如何使用Webpack及其dev-server实现热更新与自动打开浏览器的功能。包括安装步骤、项目目录结构设置、配置文件详解及常见问题解决方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文的目的是要体验下使用webpack服务器的热更新和构建完成自动弹出浏览器的酷炫效果。

1、webpack及webpack-dev-server的安装

全局安装webpack,使用命令npm install webpack -g
全局安装webpack-dev-server,使用命令npm install webpack-dev-server -g

2、项目文件目录结构

例子的目录结构如下:
426827-20180809145945508-1949790282.png

hello.js文件的作用是导出一段文本,代码如下:
426827-20180809150334159-883669156.png

index.js文件的作用是引用文本,并打印到页面上。代码如下:
426827-20180809150514214-931737006.png

最后在页面中引用打包好的bundle.js,页面代码如下:
426827-20180809150723260-1713640642.png

3、webpack.config.js文件配置

代码写完后,配置下 webpack,配置文件如下:
426827-20180809151113954-1554245907.png
从配置上看入口文件是index.js,打包后会生成一个bundle.js。在通过webpack-dev-server启动时,服务器会在3000端口监听,并自动打开浏览器。

4、项目运行结果

写好代码和配置后,我们运行webpack-dev-server --hot命令,结果杯具了。保错:Cannot find module 'webpack'
426827-20180809152426827-1910443297.png

百度一番,发现是环境变量的配置问题。新建一个系统环境变量NODE_PATH,值为:C:\Users\Administrator\AppData\Roaming\npm\node_modules
426827-20180809153339397-956165834.png

可以检查一下环境变量的值是否正确,具体是在电脑的地址栏中输入地址C:\Users\Administrator\AppData\Roaming\npm\node_modules
426827-20180809152847248-171076175.png

敲回车后,进入目录:
426827-20180809153048503-459466713.png

在这个目录下我们看到了全局安装的webpack和webpack-dev-server,这证明我们的路径配置无误。

运行命令webpack-dev-server --hot
426827-20180809153727854-652731487.png

浏览器console中可以看到如下信息,代表热更新启动成功,我们修改代码后不用刷新页面。
426827-20180809154051806-821751767.png

5、注意事项

注意的地方:
1、有资料说使用webpack-dev-server直接启动,这种情况下要使用热更新,必须在webpack.config.js文件中引入插件HotModuleReplacementPlugin。
webpack官网上有对这个的说明,截图如下:
426827-20180809154539178-331690985.png

2、使用webpack-dev-server服务器启动时,打包生成的文件在内存中,而使用webpack命令打包生成的bundle.js默认是在dist目录下,页面引用的时候路径不同。

转载于:https://www.cnblogs.com/xiaokebb/p/9448734.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值