最近嘗試用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時需要手動在瀏覽器中刷新)