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);

启动服务：

$ node server.js

能够看到配置成功，以下图所示：

结语

至此，本文对webpack-dev-server的自动刷新和热加载作了详细介绍，固然，它的原理还有待更深一步的探索。后续我还会进行更深刻的学习，但愿和你们共同进步。

参考资料

http://webpack.github.io/docs...

（本文完）

webpack学习（三）—— webpack-dev-server

自动刷新

iframe模式

inline模式

Hot Module Replacement（热加载）

结语

参考资料

`iframe`模式

`inline`模式

`Hot Module Replacement`（热加载）