webpack---less+热更新 使用
2024-08-29 07:15:10
最近尝试用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时需要手动在浏览器中刷新)
最新文章
- 【QQ技术】群文件报毒怎样下载?~ 变相绕过QQ复杂检验过程
- cf--------(div1)1A. Theatre Square
- useradd和adduser的区别
- 开源存储之ceph
- 2个Web上传组件
- poj2196
- (@WhiteTaken)设计模式学习——建造者模式
- X-Scan使用教程
- LeetCode 74. Search a 2D Matrix(搜索二维矩阵)
- RSA,DES,RC4,3DES ,MD5
- 红米 Note3 (kenzo)刷入 Lineage OS
- asp.net core 系列 5 MVC框架路由(上)
- 洛谷 P3380 【【模板】二逼平衡树(树套树)】
- python2.x版本与python3.x版本的区别以及运算符
- classpath和classpath*的区别
- #考研笔记#计算机之PPT问题
- add (db.collection.add)添加数据
- Oracle12.2中新增的分区功能
- 论 业务系统 架构 的 简化 (一) 不需要 MQ
- 使用Plant Simulation连接SQL Server
热门文章
- CTE 中字符串拼接
- Python爬虫实战一之爬取糗事百科段子
- No member named 'setResizeMode' in 'QHeaderView' - Convert Qt 4.7 to Qt 5.8
- ssh上外网
- Spring框架总结(七)
- mybaits foreach
- RegularExpression
- Statement 接口的应用(存在sql语句的注入风险)
- SpringCloud教程 | 第七篇: 高可用的分布式配置中心(Spring Cloud Config)(Finchley版本)
- getTextContent()方法会出现The method getTextContent() is undefined for the type Node 提示