webpack---less+熱更新 使用

　　最近嘗試用less寫界面,webpack進行打包，而後發現每次修改less時都須要從新執行webpack打包一下，因而就想到了webpack熱更新這個功能。

1、使用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文件進行打包了。

2、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時須要手動在瀏覽器中刷新）