less webpack 热更新_webpack---less+热更新 使用

本文介绍了使用less和webpack进行界面开发及热更新的方法。less是CSS预处理语言,使用时需安装相关服务和loader,并在webpack.config.js中配置。webpack-dev-server可实现热更新,下载后在webpack.config.js中配置devServer,在package.json里定义命令,修改代码保存后界面自动更新,修改HTML需手动刷新。

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

HTML

CSS

HTML5

CSS3

webpack---less+热更新 使用

最近尝试用less写界面,webpack进行打包,然后发现每次修改less时都需要重新执行webpack打包一下,于是就想到了webpack热更新这个功能。

一、使用less

less是一门css预处理语言,它是拓展了css,增加了变量,Mixin等等。使用less需要安装less服务,less-loader用来打包时用,想要将less正确解析成css当然还需要style-loader和css-loader。loader是webpack重要的功能之一,通过使用不同的loader,webpack可以使用外部脚本或工具处理不同格式类型的文件,如通过less-loader处".less"文件。

首先安装:

npm install less --save-dev

npm install style-loader css-loader less-loader --save-dev

webpack.config.js配置:

module: {

rules: [{

test:/.less$/,

use: ['style-loader', 'css-loader', 'less-loader']

}]

}

然后将.less文件加载到入口文件里,如在入口文件里import '../less/topHead.less';这样就可以执行webpack把.less文件进行打包了。

二、webpack-dev-server热更新

使用热更新,当每次修改完代码保存后,不用手动的执行webpack打包命令,界面会自动更新。

要执行webpack-dev-server是要先用npm install webpack-dev-server –save-dev 来进行下载的。下载好后,需要在webpack.config.js中配置一下devServer。

devServer:{//设置基本目录结构

contentBase:path.resolve(__dirname,'dist'),//服务器的IP地址,可以使用IP也可以使用localhost

host:'localhost',//服务端压缩是否开启

compress:true,//配置服务端口号

port:8090}

contentBase:配置服务器基本运行路径,用于找到程序打包地址。你的程序打包的出口目录是什么,就将“dist”换成什么

host:服务运行地址,这里使用本机IP,localhost。

compress:服务器端压缩选型,一般设置为开启。

port:服务运行端口,建议不使用80,很容易被占用,这里使用了8090.

最后在packege.json里的scripts里定义一下命令

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

然后就可以执行npm server启动热更新服务了。当每次修改代码后就不用手动webpack打包了,只需要保存修改的文件即可。(注意:修改HTML时需要手动在浏览器中刷新)

内容来源于网络,如有侵权请联系客服删除

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值