dede网站404怎么做,centos 网站搭建,手机排行榜软件,网页制作教程免费视频最近尝试用less写界面,webpack进行打包#xff0c;然后发现每次修改less时都需要重新执行webpack打包一下#xff0c;于是就想到了webpack热更新这个功能。一、使用lessless是一门css预处理语言#xff0c;它是拓展了css#xff0c;增加了变量#xff0c;Mixin等等。使用l…最近尝试用less写界面,webpack进行打包然后发现每次修改less时都需要重新执行webpack打包一下于是就想到了webpack热更新这个功能。一、使用lessless是一门css预处理语言它是拓展了css增加了变量Mixin等等。使用less需要安装less服务less-loader用来打包时用想要将less正确解析成css当然还需要style-loader和css-loader。loader是webpack重要的功能之一通过使用不同的loaderwebpack可以使用外部脚本或工具处理不同格式类型的文件如通过less-loader处.less文件。首先安装npm install less --save-devnpm install style-loader css-loader less-loader --save-devwebpack.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也可以使用localhosthost:localhost,//服务端压缩是否开启compress:true,//配置服务端口号port:8090}contentBase:配置服务器基本运行路径用于找到程序打包地址。你的程序打包的出口目录是什么就将“dist”换成什么host服务运行地址这里使用本机IPlocalhost。compress服务器端压缩选型一般设置为开启。port服务运行端口建议不使用80很容易被占用这里使用了8090.最后在packege.json里的scripts里定义一下命令scripts: {server:webpack-dev-server}然后就可以执行npm server启动热更新服务了。当每次修改代码后就不用手动webpack打包了只需要保存修改的文件即可。(注意修改HTML时需要手动在浏览器中刷新)
