[webpack] webpack-dev-server介紹及配置

本文轉載自查看原文 2016-07-13 00:43 20601 webpack

webpack-dev-server是webpack官方提供的一個小型Express服務器。使用它可以為webpack打包生成的資源文件提供web服務。webpack-dev-server官方文檔

webpack-dev-server 主要提供兩個功能：

為靜態文件提供服務
自動刷新和熱替換(HMR)

文件結構

    |--src
    |    |--views
    |       |--index.js
    |       |--module_a
    |           |--list.js
    |       |--module_b
    |           |--list.js
    |--index.html
    |--webpack.config.base.js
    |--webpack.config.dev.js

文件內容

[/src/.../module_a/list.js]

export function getName() {
    console.log("module_a_list");
}

[/src/.../module_a/list.js]

export function getName() {
    console.log("module_b_list");
}

[/src/.../index.js]

import * as a_list from "./module_a/list.js"
import * as b_list from "./module_b/list.js"

a_list.getName();
b_list.getName();

[/index.html]

<html>

<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>RUN WEBPACK_DEMO</h1>
    <script src="/dist/app.js"></script>
</body>

</html>

[/webpack.config.base.js]

var webpack = require("webpack");
var path = require("path");

module.exports = {
    cache: true,
    debug: true,
    entry: {
        "app": "./src/views/index.js"
    },
    output: {
        filename: "[name].js",
        path: __dirname + "/dist",
        publicPath: "/dist/"
    },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: "babel",
                query: {
                    presets: ["react", "es2015", "stage-0"],
                    cacheDirectory: true
                },
                exclude: /node_modules/
            }
        ]
    },
    plugins: []
}

[/webpack.config.base.js]

var webpack = require("webpack");
var webpackBase = require("./webpack.config.base.js");

var cfg = Object.assign(webpackBase, {
    devtool: "cheap-module-eval-source-map"
});

module.exports = cfg;

webpack-dev-server

首先需要全局安裝webpack-dev-server

npm i webpack-dev-server -g

package.json配置scripts:

"scripts":{
    "start":"webpack-dev-server --config webpack.config.dev.js"
}

執行npm start，輸出如下：

命令要求webpack-dev-server執行當前目錄下webpack.config.dev.js文件，發布地址默認為localhost:8080

瀏覽器訪問http://localhost:8080，可以看到，項目根目錄下的index.html開始運行
F12打開瀏覽器控制台，輸出js文件log

以上，一個簡單的devServer配置就完成了

自動刷新

在實際開發中，我們往往有以下需求：
1、每次修改代碼后，webpack可以自動重新打包
2、瀏覽器可以響應代碼變化並自動刷新
webpack-dev-server提供了兩種自動刷新模式：iframe和inline

iframe

頁面被嵌套在一個iframe下，代碼發生改動后，iframe會重新加載
使用此模式無需額外配置，只需訪問http://localhost:8080/webpack-dev-server/index.html即可，顯然webpack-dev-server默認的模式就是iframe

瀏覽器訪問http://localhost:8080/webpack-dev-server/index.html
修改js代碼后保存，命令行log顯示module_a/list.js變化導致app.js重新生成：
同時瀏覽器自動刷新，控制台輸出如下：

inline

此方式會將webpack-dev-server客戶端加入到webpack入口文件的配置中。
配置方式有兩種：CLI配置和通過Node.js Api手動配置

1）CLI 方式

此方式比較簡單，只需在webpack.dev.server啟動的命令中加入--inline即可

修改package.json中scripts配置，添加--inline：

"scripts":{
    "start":"webpack-dev-server --inline --config webpack.config.dev.js"
}

重新運行npm start，瀏覽器訪問http://localhost:8080即可，修改代碼后保存，瀏覽器自動刷新

當然webpack-dev-server類似的命令還有很多，比如，我們就可以規定項目可訪問的地址為http://localhost:9093：

"scripts":{
    "start":"webpack-dev-server --inline --host localhost --port 9093 --config webpack.config.dev.js"
}

更多配置參考webpack-dev-server CLI文檔

2）Node.js Api方式

此方式需要手動將webpack-dev-server客戶端配置到webpack打包的入口文件中

修改文件webpack.config.dev.js：

var webpack = require("webpack");
var webpackBase = require("./webpack.config.base.js");


var cfg = Object.assign(webpackBase, {
    devtool: "cheap-module-eval-source-map"
});

//entry 
Object.getOwnPropertyNames((webpackBase.entry || {})).map(function (name) {
    cfg.entry[name] = []
        //添加webpack-dev-server客戶端
        .concat("webpack-dev-server/client?http://localhost:9091")
        .concat(webpackBase.entry[name])
});

module.exports = cfg;

根目錄添加文件devServer.js，用於創建服務器實例

var path = require("path");
var webpack = require("webpack");
var webpackDevServer = require("webpack-dev-server");
var webpackCfg = require("./webpack.config.dev.js");

var compiler = webpack(webpackCfg);

//init server
var app = new webpackDevServer(compiler, {
    //注意此處publicPath必填
    publicPath: webpackCfg.output.publicPath
});

app.listen(9390, "localhost", function (err) {
    if (err) {
        console.log(err);
    }
});

console.log("listen at http://localhost:9390");

修改package.json中scripts配置，通過執行devServer.js文件啟動服務器：

"scripts":{
    "start":"node devServer.js"
}

重新運行npm start，瀏覽器訪問http://localhost:9390即可，修改代碼后保存，瀏覽器自動刷新

熱替換(HMR)

當我們使用webpack-dev-server的自動刷新功能時，瀏覽器會整頁刷新。
而熱替換的區別就在於，當前端代碼變動時，無需刷新整個頁面，只把變化的部分替換掉。
配置的關鍵在於將webpack/hot/dev-server文件加入到webpack所有入口文件中。
使用HMR同樣同樣有兩種方式：CLI和Node.js Api

CLI方式

命令行配置比較簡單，只需在自動刷新的基礎上，加上--hot配置即可。
此配置會自動將webpack/hot/dev-server添加到webpack所有入口點中。

修改package.json中scripts配置，添加--hot：

"scripts":{
    "start":"webpack-dev-server --inline --hot --config webpack.config.dev.js"
}

執行npm start，瀏覽器訪問http://localhost:8080即可，當控制台出現如下信息，說明HMR配置成功

Node.js Api方式

此方式需要手動將webpack/hot/dev-server配置到所有webpack入口文件中

修改文件webpack.config.dev.js，添加webpack/hot/dev-server，添加插件HotModuleReplacementPlugin：

var webpack = require("webpack");
var webpackBase = require("./webpack.config.base.js");


var cfg = Object.assign(webpackBase, {
    devtool: "cheap-module-eval-source-map"
});

//entry
Object.getOwnPropertyNames((webpackBase.entry || {})).map(function (name) {
    cfg.entry[name] = []
        //添加HMR文件
        .concat("webpack/hot/dev-server")
        .concat("webpack-dev-server/client?http://localhost:9390")
        .concat(webpackBase.entry[name])
});

//plugins
cfg.plugins = (webpackBase.plugins || []).concat(
    new webpack.optimize.OccurrenceOrderPlugin(),
    //添加HMR插件
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
)

module.exports = cfg;

根目錄添加文件devServer.js，用於創建服務器實例，添加hot:true

var path = require("path");
var webpack = require("webpack");
var webpackDevServer = require("webpack-dev-server");
var webpackCfg = require("./webpack.config.dev.js");

var compiler = webpack(webpackCfg);

//init server
var app = new webpackDevServer(compiler, {
    //注意此處publicPath必填
    publicPath: webpackCfg.output.publicPath,
    //HMR配置
    hot:true
});

app.listen(9390, "localhost", function (err) {
    if (err) {
        console.log(err);
    }
});

console.log("listen at http://localhost:9390");

修改package.json中scripts配置，通過執行devServer.js文件啟動服務器：

"scripts":{
    "start":"node devServer.js"
}

重新運行npm start，瀏覽器訪問http://localhost:9390即可，當控制台出現如下信息，說明HMR配置成功

可見，使用webpack-dev-server輔助開發，可以極大的方便前端調試。特別是在前后端分離的場景下，使前端可以更加靈活的構建自己的開發環境。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 [webpack] webpack-dev-server介紹及配置 webpack-dev-server的配置 webpack和webpack-dev-server 安裝和基本配置 webpack基礎+webpack配置文件常用配置項介紹+webpack-dev-server webpack-dev-server webpack-dev-server配置https 211、webpack-dev-server的安裝與配置 Webpack實戰（二）：webpack-dev-server的介紹與用法 webpack插件配置（一） webpack-dev-server 路徑配置 webpack-dev-server配置指南（使用webpack3.0）