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辅助开发,可以极大的方便前端调试。特别是在前后端分离的场景下,使前端可以更加灵活的构建自己的开发环境。

[webpack] webpack-dev-server介绍及配置的更多相关文章

  1. webpack 4 & dev server

    webpack 4 & dev server proxy https://webpack.js.org/configuration/dev-server/#devserverproxy htt ...

  2. 笔记:配置 webpack dev server

    笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...

  3. 配置Webpack Dev Server 实战操作方法步骤

    本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...

  4. 解决新版本webpack vue-cli生成文件没有dev.server.js问题

    新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') ...

  5. [Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone

    Testing your sites on mobile devices is a critical part of the development process. Webpack dev serv ...

  6. Webpack的详细配置,[Webpack中各种loader的安装配置]

    在使用webpack的时候,你是不是被以下这种报错所困扰: 注意看 黄色框中标注的 You may need an appropriate loader to handle this file typ ...

  7. webpack run dev后并没有生成dist目录,但是浏览器里却读取了dist里的build.js?

    最近想看看现在做的React项目用的脚手架,看了下webpack的配置,尝试修改一些东西看看输出结果,结果允许npm run dev发现没有输出目录,怎么回事呢.又安装了vue官方提供的webpack ...

  8. webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  9. webpack常用配置项配置文件介绍

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

随机推荐

  1. java设计模式 模板方法模式Template Method

    设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性.毫无疑问,设计模式于己 ...

  2. Python聊天室

    小编心语:锵锵锵!各位看官注意了啊,走过路过表错过!上篇博文主要介绍了基于基于Server-Sent Event的简单在线聊天室,相信不管各位是大牛.小牛还是跟小编一样的小白,可能觉得看得不够过瘾,区 ...

  3. linux内存使用计算方式

    Linux开机后,使用top命令查看,4G物理内存发现已使用的多大3.2G,占用率高达80%以上: Mem: 3889836k total, 3341868k used, 547968k free, ...

  4. c++ 奇特的递归模板模式(CRTP)

    概述 使用派生类作为模板参数特化基类. 与多态的区别 多态是动态绑定(运行时绑定),CRTP是静态绑定(编译时绑定) 在实现多态时,需要重写虚函数,因而这是运行时绑定的操作. CRTP在编译期确定通过 ...

  5. SQL SERVER修改排序规则——脚本篇

    在上篇MS SQL 排序规则总结中,大致就数据库服务器排序规则(或者叫数据库实例排序规则).数据库排序规则.列的排序规则粗浅的叙说了一遍,重点讲述了修改数据库服务器排序规则(数据库实例排序规则),其中 ...

  6. 《java JDK7 学习笔记》之Collection

    一.使用Collection 收集对象 1.认识Collection架构 Java SE提供了满足各种需求的API,在使用这些API前,建议先了解其继承与接口操作架构,才能了解何时使用哪个类,以及类之 ...

  7. SQL Server自动化运维系列——关于邮件通知那点事(.Net开发人员的福利)

    需求描述 在我们的生产环境中,大部分情况下需要有自己的运维体制,包括自己健康状态的检测等.如果发生异常,需要提前预警的,通知形式一般为发邮件告知. 邮件作为一种非常便利的预警实现方式,在及时性和易用性 ...

  8. W3School-CSS 伪类 (Pseudo-classes) 实例

    CSS 伪类 (Pseudo-classes) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) ...

  9. 大数据系统之监控系统(二)Flume的扩展

    一些需求是原生Flume无法满足的,因此,基于开源的Flume我们增加了许多功能. EventDeserializer的缺陷 Flume的每一个source对应的deserializer必须实现接口E ...

  10. Autofac在MVC4中牛刀小试

    Autofac是传说中速度最快的一套.NET高效的依赖注入框架.Autofac的介绍与使用请去参考Autofac全面解析系列(版本:3.5).   这里介绍的已经挺详细的啦. 下面我就先来说说MVC4 ...