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

時間 2020-06-24

標籤 webpack dev server 介紹配置简体版

原文原文鏈接

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

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

爲靜態文件提供服務
自動刷新和熱替換(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]java

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

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

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]python

<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]react

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]webpack

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-servergit
```
npm i webpack-dev-server -g
```

package.json配置scripts:github

"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配置就完成了

自動刷新

在實際開發中，咱們每每有如下需求：
一、每次修改代碼後，webpack能夠自動從新打包
二、瀏覽器能夠響應代碼變化並自動刷新
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輔助開發，能夠極大的方便前端調試。特別是在先後端分離的場景下，使前端能夠更加靈活的構建本身的開發環境。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。