webpack-服务和热更新

今天来分享一招,看标题,热更新,其实就是即写即现,当然如果你用的是双屏电脑这样更便于开发,就能及时看到你所要的效果。

设置webpack-dev-server
在设置webpack-dev-server前要npm install webpack-dev-server ––save-dev下载,然后配置devServer,简单的配置devServer只有四项。如下代码:
/webpack.config.js

devServer:{
        //设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        //服务器的IP地址,可以使用IP也可以使用localhost
        host:'localhost',
        //服务端压缩是否开启
        compress:true,
        //配置服务端口号,建议不使用80,很容易被占用,这里使用了4350,你也可以用自己喜欢的数字来作为端口号
        port:4350
    }//配置webpack开发。服务配置服务器基本运行路径,用于找到程序打包地址

安装失败原因:
- 我安装的时候有个ERR报错,原因是缺少文件,这个我就不知道缺少哪个文件了,不过肯定是node_modules里缺少了,因为我做这个之前看这个文件多东西了,就傻傻的删除了,应该都是有用的文件,所以小伙伴们在下载完每一项的时候都注意一下。之后就用到之前我说的方法,把这个文件夹删除,重新建立npm install,然后再npm run server看效果。
- 若还是有问题,就是显示无法找到内部或外部命令(或者其他)可以在package.json文件中这样修改:

"scripts": {
    "server": "webpack-dev-server --open"
  },

–open就是你运行完后自动给你打开网页的一个写法,就不需要你还要复制了网页链接再去浏览器打开了。

所以要成为一个优秀的开发者不止要细心还有重视出过的错并把它记录下来。

### 回答1: 对于webpack-dev-server的用法,我可以告诉你,webpack-dev-server是一个用于开发环境的快速web服务器,它可以使用内存中的文件系统来提供静态文件服务,可以支持热模块替换(HMR)。它可以通过添加--hot参数来启用热更新,可以通过添加--inline参数来启用实时重载,还可以添加--open参数来自动打开浏览器。 ### 回答2: webpack-dev-server 是一个基于 Node.js 的轻量级开发服务器,用于在开发阶段快速启动和调试 Webpack 构建的应用程序。 使用 webpack-dev-server 需要先全局安装 webpackwebpack-dev-server,然后在项目中安装 webpackwebpack-cli。 使用 webpack-dev-server 的基本用法如下: 1. 在项目的配置文件中(比如 webpack.config.js),设置 entry、output 和其他需要的配置。 2. 安装好 webpack-dev-server 后,在终端输入 `webpack-dev-server` 启动服务器。 3. 默认情况下,webpack-dev-server 会启动在 localhost:8080 上,可以在浏览器中访问该地址来查看编译后的应用。 4. webpack-dev-server 在内存中编译和打包应用程序,并通过 WebSocket 将应用程序的修改通知到浏览器,实现热模块替换(Hot Module Replacement)的功能。 5. webpack-dev-server 还提供了一些额外的配置选项,比如设置监听的端口号、是否自动打开浏览器、是否使用 HTTPS 等等。这些选项可以在启动 webpack-dev-server 时通过命令行参数或在配置文件中进行配置。 总结来说,webpack-dev-server 是一个方便的工具,能够帮助我们快速启动和调试 Webpack 构建的应用程序,在开发过程中提供热更新的功能,提高开发效率。 ### 回答3: webpack-dev-server是一个为开发环境提供的快速开发服务器。它是一个基于Node.js的工具,能够在本地运行webpack打包后的应用,以便于开发人员能够实时预览和调试应用。 使用webpack-dev-server的步骤如下: 1. 首先,在项目的根目录中安装webpack-dev-server,可以通过npm或者yarn进行安装。例如,在命令行中输入`npm install webpack-dev-server --save-dev`。 2. 在webpack配置文件中进行相应的配置。需要注意的是,配置文件中需要添加`devServer`选项,并设置一些属性,例如`contentBase`指定服务器启动的文件目录,`port`指定服务器运行的端口号等等。这些配置可以根据自身的需求进行调整。 3. 在项目中添加一个启动脚本。在项目的`package.json`文件中的`scripts`字段中添加一个脚本,例如`"start": "webpack-dev-server"`。然后,在命令行中输入`npm start`即可启动webpack-dev-server。 4. 此时,webpack-dev-server会根据配置文件中的选项,启动一个本地服务器,并监听指定的端口。在浏览器中打开`localhost:port`(port为配置文件中设置的端口号),即可在实时预览应用程序。 webpack-dev-server还提供了一些其他的功能,例如热模块替换(Hot Module Replacement),它能够在应用代码变动时,自动刷新浏览器,以保持应用状态的连续性。 总而言之,webpack-dev-server是一个非常方便的工具,能够提高开发效率,实时预览和调试应用程序。它简化了项目的配置过程,并提供了一些有用的功能,确保开发人员能够更加便捷地进行开发工作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值