webpack開啟本地服務器與熱更新

• 第一個webpack本地服務
• webpack本地服務相關的一些操作指令與應用

 一、第一個webpack本地服務

//工作區間
    src//文件夾
        index.js//入口文件
        index.css//測試樣式文件
        index.html//結構文件
    package.json//打包系統配置信息
    webpack.config.js//打包配置

需要下載安裝的加載器和插件：

npm install webpack --save-dev
npm install webpack-cli --save-dev
npm install style-loader --save-dev
npm install css-loader --save-dev
npm install html-webpack-plugin --save-dev
npm install clean-webpack-plugin --save-dev
npm install webpack-dev-server -g
npm install webpack-dev-server -save-dev

一定要注意先在全局安裝webpack-dev-server，然后再在局部工作區間安裝。然后測試代碼非常簡單，只需要一個html默認生成結構，css給body設置背景色，然后再入口文件index.js中引入css文件。接着使用下面這份打包配置，如果對我前面博客的webpacd內容都有了解你會發現這是個最簡單的配置：

var path = require('path');
var {CleanWebpackPlugin} = require('clean-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:{
        index:'./src/index.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name][hash:5].bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    {loader:'style-loader'},
                    {loader:'css-loader'}
                ]
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    mode:'development'
}

執行：webpack測試是否配置成功，在配置成功的情況下執行下一行指令。

執行：webpack-dev-server。執行玩成功的話webpack就開始對作用域中的代碼文件執行監聽，控制台的指針一直處於閃爍狀態。然后找到剛剛的執行說明，在說明里找到生成的本地端口鏈接，下面是我測試生成的端口鏈接截圖（把鏈接直接粘貼進瀏覽器鏈接欄）：

你會發現鏈接的網頁就是你剛剛編輯打包好的html頁面，這時候再回到編輯器修改樣式（修改body背景色），修改好以后保存，這時候頁面會自動刷新，然后在測試js代碼，在js中編輯一個console.log(‘hello’)打印指令，編輯后保存可以看到在瀏覽器控制自動打印了hello。以上的操作就是本地服務的功能，在很多公司中前端為了提高開發效率會使用雙屏同時工作，一個編碼一個展示時時的效果，就可以使用webpack-dev-server來實現。

既然是服務，當然少不了數據請求操作，接下來就使用以下ajax請求：

npm install jquery --save-dev

然后，將config文件中的清除打包文件的clean-webpack-plugin注釋，因為需要再dist文件夾中緩存一個json文件，用來測試服務器數據請求（json文件的數據任意）：

//        new CleanWebpackPlugin(),

然后啟動服務並重新用新生成的鏈接打開頁面（開啟瀏覽器控制台）：

webpack-dev-server

接着在編輯器中編輯index.js，寫入一個jQuery的ajax請求來請求本地服務器中的JSON數據：

import './index.css';
// var $ = require('jquery');
import $ from 'jquery';
$.ajax({
    url:'http://localhost:8081/dist/data.json',//注意這個路徑是由生成的鏈接+打包文件夾路徑+json文件名
    success:function(data){
        console.log(data);
    },
    error:function(){
        console.log('error');
    }
})

當你編輯好index.js保存時就你會發現，可以的通過ajax向本地服務器發生請求。

 二、webpack本地服務相關的一些操作指令與應用

因為程序使用默認端口的原因，可能會出現端口沖突的問題，如果端口沖突的話可以再config.js文件中配置端口：

module.exports = {
    devServer:{
        port:'9091'
    }
}

將這個配置添加到配置文件中，就可以在指定的端口上開啟服務，但是有一點需要注意的是，如果修改配置文件時服務是開啟狀態的話，並不會自動刷新，需要手動關閉當前監聽，然后啟動才會生效。（CTRL + C 熱鍵關閉服務）

因為webpack本地服務監聽項目代碼，並不監聽打包環境的config.js配置文件，所以需要重新開啟服務。接着上面的配置，還可以添加一個配置屬性來指定服務器地址，默認情況下服務器區間是在控制台開啟服務的位置，由於這個區間就是工作區間，下面除了包含生成的代碼dist文件夾，還有代碼文件夾src和配置文件等，為了更好的區分服務器和開發環境可以添加以下配置：

    devServer:{
        port:'9091',
        contentBase:'dist'
    },

如果更改了服務器空間，那么ajax的請求就肯定需要改了，之前路徑中的dist這層需要刪除才能找到data.json。

url:'http://localhost:9091/data.json',

到這一步是不是發現有一個操作很不方便，就是需要手動復制鏈接或者手動去瀏覽器輸入鏈接，webpack怎么會這么不方便呢？下面這個指令幫你解決：

webpack-dev-server --open//開啟本地服務器是自動在默認瀏覽器打開頁面

由於開啟服務后，每一次觸發更新頁面就在控制帶打印出相關的信息，在調試中需要debug的話去查看控制台清一色的白色提示信息會讓你很難受，這時候你只需要這樣做：

webpack-dev-server --open --color

指令后面添加--color指令，控制台的提示信息就會有不同的顏色來區分不同的信息。

 三、熱更新：hot module replace

前面介紹了開啟本地服務和自動刷新頁面，注意“自動刷新頁面”這句話，在前端開發中對於這句話應該會非常敏感，因為刷新頁面就意味着將數據全部重新請求一次，這種事情除了第一次請求頁面以后就不應該出現在前端服務中，想想你每一次保存源代碼文件都會觸發一次所有網絡請求、編譯、執行，估計一天的工作時間就有一半的時間在等待頁面刷新中了，在我們的測試代碼中由於源代碼體量非常小無法感知，如果在實際開發中你想想請求一個頁面會有多大。這個問題的嚴重性說的比較多了，接下來來看webpack怎么實現局部刷新來解決性能問題：

通過webpack模塊的內置插件開啟css修改代碼實現局部刷新：（在config配置文件中添加以下配置）

var Webpack = require('webpack');//引入webpack模塊
...
module.exports = {
    plugins:[
        ...
        new Webpack.HotModuleReplacementPlugin()//引入局部刷新插件
    ],
    devServer:{
        ...
        hot:true//開啟熱更新
    }
}

添加上面的配置以后，在開啟服務更新css代碼，就可以實現熱更新（局部刷新），而不是刷新整個頁面了。但是這個配置還不能解決js代碼的局部刷新，js熱更新需要以下配置：

js熱更新只需要在前面配置的基礎上，只需要在js中添加這段代碼（提醒：添加在js代碼文件中）：

//判斷是否開啟熱更新，如果開啟了則對js文件執行熱更新操作
if(module.hot){
    module.hot.accept();
}

識別js是否熱更新，就看瀏覽器控制台的打印結果是否會在更新時被清空，如果每一次更新都清空就說明是頁面刷新，如果是在原來的打印結果下面添加更新打印結果就開啟了熱更新。

最后提供配置文件代碼和js代碼：

var path = require('path');
var {CleanWebpackPlugin} = require('clean-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var Webpack = require('webpack');
module.exports = {
    entry:{
        index:'./src/index.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name][hash:5].bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    {loader:'style-loader'},
                    {loader:'css-loader'}
                ]
            }
        ]
    },
    plugins:[
        // new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new Webpack.HotModuleReplacementPlugin()
    ],
    devServer:{
        port:'9091',
        contentBase:'dist',
        hot:true
    },
    mode:'development'
}

import './index.css';
// var $ = require('jquery');
import $ from 'jquery';
$.ajax({
    url:'http://localhost:9091/data.json',//注意這個路徑是由生成的鏈接+打包文件夾路徑+json文件名
    success:function(data){
        console.log(data);
    },
    error:function(){
        console.log('error');
    }
})
console.log('熱更新了嗎？');

//判斷是否開啟熱更新，如果開啟了則對js文件執行熱更新操作
if(module.hot){
    module.hot.accept();
}