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

最近尝试用less写界面,webpack进行打包，而后发现每次修改less时都须要从新执行webpack打包一下，因而就想到了webpack热更新这个功能。css

1、使用lesswebpack

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

首先安装：npm

npm install less --save-dev

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

webpack.config.js配置：json

module: {

rules: [{

test:/\.less$/,

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

}]

}

而后将.less文件加载到入口文件里，如在入口文件里import '../less/topHead.less';这样就能够执行webpack把.less文件进行打包了。浏览器

2、webpack-dev-server热更新服务器

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

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

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时须要手动在浏览器中刷新)