webpack學習（三）—— webpack-dev-server

時間 2019-11-06

標籤 webpack 學習 dev server 简体版

原文原文鏈接

本文主要介紹如下兩方面的內容：css

webpack-dev-server自動刷新html
熱加載（Hot Module Replacement）node

自動刷新

webpack-dev-server提供了兩種自動刷新的模式webpack

iframe模式git
inline模式github

這兩種模式都支持Hot Module Replacement（熱加載），所謂熱加載是指當文件發生變化後，內存中的bundle文件會收到通知，同時更新頁面中變化的部分，而非從新加載整個頁面。web

咱們先介紹自動刷新，再來談熱加載。npm

`iframe`模式

前兩篇文章中提到，咱們在控制檯輸入api

$ webpack-dev-server

就啓動了服務，而且支持自動刷新，其實，這種方式就是iframe模式。查看頁面元素能夠發現：數組

如圖中黑框所示，能夠看到實際上是經過iframe內使咱們實際的頁面。
這種方式有一點須要注意：瀏覽器地址欄的url地址不會受頁面跳轉的影響，將一直保持爲http://localhost:8080/webpack-dev-server。
好比，如今給index.html頁面加上一個跳轉連接，跳轉到foo.html。
foo.html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>webpack demo</title>
    </head>
    <body>
        <p>this is another page</p>
    </body>
</html>

index.html中加入跳轉連接以下：

<body>
    <div class="main" id="main">
        <p>webpack demo</p>
    </div>
    <a href="./foo.html">click here to go to foo.html</a>
</body>

當點擊連接跳轉到foo.html頁面時，能夠看到瀏覽器的地址欄中仍然是http://localhost:8080/webpack-dev-server。以下：

`inline`模式

這裏要說一下，目前咱們啓動webpack-dev-server都是經過命令行實現的。實際上，還能夠經過nodeAPI WebpackDevServer實現。
先看命令行如何實現inline模式，有兩種方法：
一、啓動時配置

$ webpack-dev-server --inline

二、配置文件配置，在webpack.config.js中加入

devServer: { inline: true }

這樣咱們就能夠經過http://localhost:8080/<path>來訪問咱們的文件了。好比這樣http://localhost:8080/index.html來訪問index.html，且頁面跳轉回反映在瀏覽器的地址欄中。

接下來講明如何使用WebpackDevServer來實現inline模式。
在項目根目錄下建立server.js，經過這個文件來起服務。
server.js

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');

var config = require('./webpack.config.js');
config.entry.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
    publicPath: '/dist/'
});
server.listen(8080);

有幾個問題須要說明：
一、這裏加載了webpack和webpack-dev-server兩個模塊，這個require默認會從node-modules中去加載。因爲咱們以前安裝時爲了方便在命令行下使用，採用了全局安裝的方式-g，因此本地並無安裝這個模塊。這裏須要在當前項目中再進行安裝

$ npm install webpack webpack-dev-server

二、在配置文件webpack.config.js中無需再對devServer進行配置，由於咱們這樣啓動服務的話，WebpackDevServer是訪問不到webpack中的配置的。可是，咱們須要對配置文件的entry進行修改：

entry: ["./src/entry.js"]

以數組方式來寫，這樣就能夠支持多個入口文件。同時在server.js中加入

config.entry.unshift("webpack-dev-server/client?http://localhost:8080/");

三、WebpackDevServer支持兩個參數，其中第二個參數對WebpackDevServer進行了配置，剛剛提到，WebpackDevServer是訪問不到webpack中的配置的，因此這裏咱們要再設置publicPath。
固然，爲了方便處理，通常咱們能夠統一將WebpackDevServer的配置在webpack.config.js中的devServer中設置，再將devServer做爲第二個參數傳給WebpackDevServer。以下：
webpack.config.js

module.exports = {
    devServer: {  //這裏配置webpack-dev-server
        publicPath: '/dist/'
        //這裏還能夠加入其它你須要的參數
    },
    entry: ["./src/entry.js"],
    output: {
        path: path.join( __dirname, '/dist'),
        publicPath: '/dist/',
        filename: "bundle.js"
    },
    module: {
        loaders: [
            //....
        ]
    }
};

server.js

var config = require('./webpack.config.js');
config.entry.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, config.devServer);  //這裏將其做爲參數傳進來

最後運行server.js就能夠啓動服務了。

$ node server.js

到這裏爲止，自動刷新的內容基本講完了。注意到一點，目前自動刷新都是刷新整個頁面。下面來講下熱加載，也就是隻有變化的內容更新，而非刷新整個頁面。

`Hot Module Replacement`（熱加載）

方法一：直接經過命令行設置

$ webpack-dev-server --hot

打開頁面能夠在控制檯看到以上內容，說明熱加載配置成功。其中HMS表示熱加載模塊，WDS表示webpack-dev-server。

方法二：經過nodejs的api配置
這個方法須要對webpack.config.js作出一些配置。
第一步：在webpack配置文件入口參數中加入webpack/hot/dev-server

在server.js中做以下修改便可：

config.entry.unshift("webpack-dev-server/client?http://localhost:8080/", "webpack/hot/dev-server");  //這裏在入口參數中又添加了一項，爲熱加載的dev-server

第二步：添加plugin，添加熱加載模塊

plugins: [
    new webpack.HotModuleReplacementPlugin()
]

第三步：在devServer中配置hot爲true

devServer: {
    publicPath: '/dist/',
    hot: true  //這裏配置了熱加載模式爲true
    //這裏還能夠加入其它你須要的參數
}

最終，webpack.config.js以下：

let path = require('path');
let webpack = require('webpack');

module.exports = {
    devServer: {
        publicPath: '/dist/',
        hot: true
        //這裏還能夠加入其它你須要的參數
    },
    entry: ["./src/entry.js"],
    output: {
        path: path.join( __dirname, '/dist'),
        publicPath: '/dist/',
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.css$/, 
                loader: "style!css"
            },
            {
                test: /\.less$/,
                loader: "style!css!less"
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

server.js以下：

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');

var config = require('./webpack.config.js');
config.entry.unshift("webpack-dev-server/client?http://localhost:8080/", "webpack/hot/dev-server");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, config.devServer);
server.listen(8080);

啓動服務：