最近尝试用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时需要手动在浏览器中刷新)

webpack---less+热更新 使用的更多相关文章

  1. webpack的热更新

    webpack的热更新是如何做到的?说明其原理? webpack的热更新又称热替换(Hot Module Replacement),缩写为HMR. 这个机制可以做到不用刷新浏览器而将新变更的模块替换掉 ...

  2. webpack设置热更新

    首先需要在package.json中配置一个脚本参数 --hot "dev": "webpack-dev-server --mode development --hot& ...

  3. webpack实现“热更新”和“热加载”(webpack3.6新增)

    之前的博文有提到怎么样去实现热更新,但是居然要用到另外一个node框架(express)而且新增了一个入口(entry)两个插件(plugin)来实现,大大提高了配置的复杂度,这样其实对使用webpa ...

  4. Webpack的热更新是如何做到的?原理是什么?

    一.是什么 HMR全称 Hot Module Replacement,可以理解为模块热替换,指在应用程序运行过程中,替换.添加.删除模块,而无需重新刷新整个应用 例如,我们在应用运行过程中修改了某个模 ...

  5. webpack添加热更新

    之前的wbepack一直没有加上热更新,这是一种遗憾,今天终于加上去了,看不懂我博客的可以看这篇文章:http://blog.csdn.net/hyy1115/article/details/5302 ...

  6. 关于webpack下热更新?&自动刷新?的小记(非vue-cli)

    写本随笔时:webpack4.6.0 为何标题用?号,因为老衲也不知是否用词正确,大概是这样的说法: webpack4.0引入生产模式和开发模式,在开发时使用 webpack 打包后不压缩,所以只需要 ...

  7. koa2 + webpack 热更新

    网上有很多express+webpack的热更新,但是koa2的很少,这两天研究了一下子,写一个简单的教程. 1.需要的包 webpack:用于构建项目 webpack-dev-middleware: ...

  8. webpack热更新 同时导出文件到本地

    webpack 配置热更新后,文件配置导出到本地 安装 npm i webpack-dev-server-output --save-dev 引入 const WebpackDevServerOutp ...

  9. Webpack 多html入口、devServer、热更新配置

    一.clean-webpack-plugin: 在每次生成dist目录前,先删除本地的dist文件(每次自动删除太麻烦) 1.安装clean-webpack-plugin   npm/cnpm i c ...

  10. webpack 配置 (支持 React SCSS ES6 编译打包 和 模块热更新 / 生成SourceMap)

    1.首先是目录结构 |-node_modules/ #包文件 |-build/ #静态资源生成目录 |-src/ #开发目录 |-js/ |-index.js #入口文件 |-app.js #Reac ...

随机推荐

  1. Jedis连接Redis三种模式

    这里说的三种工作模式是指: 1.单机模式 2.分片模式 3.集群模式(since 3.0) 说明图详见以下: 使用单机模式连接: private String addr="192.168.1 ...

  2. [C++] Lvalue and Rvalue Reference

    Lvalue and Rvalue Reference int a = 10;// a is in stack int& ra = a; // 左值引用 int* && pa ...

  3. redis集群部署及常用的操作命令(上)

    简单说下自己测试搭建简单的redis集群的大体步骤: 1.首先你的有6个redis(官方说最少6个,3master,3slave),可以先在一台机器上搭建,搭建到多台上应该只需要改变启动命令即可(可能 ...

  4. Qt5.3.1,的linux平台体验之旅

    1. samba安装:http://blog.csdn.net/voice_shen/article/details/7692605 2. 安装run,  sudo chmod 777 filenam ...

  5. git hook 自动部署

    1. 当前虚拟站点根目录的 .git/ 权限 2. 当前项目裸仓库创建 hooks/post-receive 文件,并给予x 的权限 3. 复制如下内容 #!/bin/sh unset $(git r ...

  6. 2015-08-13T17:39:15

    ACTION里 Date upateTime; 有setter getter 页面字符串 是'2015-08-13T17:39:15' 该字符串可以直接映射成Date .

  7. Smart3d和3dsmax结合做人脸建模

    1.拍摄几张照片(或视频 我是拍摄的视频然后截图,因为自拍照20张总是不方便) 2.导入smart3d 3.空三匹配 4.重建,并保存格式为.obj常用格式 5.将上一步重建的结果导入3dsmax做进 ...

  8. 【转载】python计算文件的行数和读取某一行内容的实现方法

    一.计算文件的行数 最简单的办法是把文件读入一个大的列表中,然后统计列表的长度.如果文件的路径是以参数的形式filepath传递的,那么只用一行代码就可以完成我们的需求了: count = len(o ...

  9. Mysql企业实战

    ==========================业务垂直分割:1>介绍说明: 随着公司的业务规模扩展,DBA需要根据企业数据业务进行切割,垂直切割又称为纵向切割,垂直数据切割是根据企业网站业 ...

  10. 使用 Git 和 GitHub 托管项目源码

    这段时间想研究下,GitHub 的使用,但是桌面版下载速度贼慢(貌似需要FQ) 好在 廖雪峰 老师有一个 Git 的教程,也可以和 GitHub 配合使用 廖雪峰老师的Git教程:http://www ...