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. Android中Listview点击item不变颜色以及设置listselector 无效

    Android中Listview点击item不变颜色以及设置listselector 无效 这是同一个问题,Listview中点击item是会变颜色的,因为listview设置了默认的listsele ...

  2. [转]HDFS中JAVA API的使用

    HDFS是一个分布式文件系统,既然是文件系统,就可以对其文件进行操作,比如说新建文件.删除文件.读取文件内容等操作.下面记录一下使用JAVA API对HDFS中的文件进行操作的过程. 对分HDFS中的 ...

  3. MS SQL 日常维护管理常用脚本(二)

    监控数据库运行 下面是整理.收集监控数据库运行的一些常用脚本,也是MS SQL 日常维护管理常用脚本(一)的续集,欢迎大家补充.提意见. 查看数据库登录名信息   Code Snippet SELEC ...

  4. 使用强大的可视化工具redislive来监控我们的redis，别让自己死的太惨~~~

    作为玩windows的码农,在centos上面装点东西,真的会崩溃的要死,,,我想大家也知道,在centos上面,你下载的是各种源代码,需要自己编译...而 使用yum的话,这个吊软件包有点想nuge ...

  5. SpringMVC @ModelAttribute注解

    /**     * 1. 有 @ModelAttribute 标记的方法, 会在每个目标方法执行之前被 SpringMVC 调用!      * 2. @ModelAttribute 注解也可以来修饰 ...

  6. redis 集群创建常见几个问题

    Redis配置集群遇到问题及解决方法   配置完所有主节点后,报" ERR Invalid node address specified" 由于Redis-trib.rb 对域名或 ...

  7. JavaScript根据文件名判断文件类型

    //JavaScript根据文件名判断文件类型 var imgExt = new Array(".png",".jpg",".jpeg",& ...

  8. amCharts图表中的JavaScript中文注释引起的浏览器兼容性问题

    近期用amCharts做图表.一切都很顺利,然后演示的时候掉链子了,平时开发的时候都是用的火狐和谷歌,加上这种图表框架本来就号称兼容性极好,也没有在ie上测试,演示的机器上恰巧用的是ie11,发现一个 ...

  9. ajax请求成功后新开窗口window.open()被拦截解决方法

    ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是很可惜被浏览器给拦截了,怎么解决这个问题呢   问题: 前面开发项目时碰到一个问题,ajax 异步请求 ...

  10. Neutron 理解 (2): 使用 Open vSwitch + VLAN 组网 [Netruon Open vSwitch + VLAN Virutal Network]

    学习 Neutron 系列文章: (1)Neutron 所实现的虚拟化网络 (2)Neutron OpenvSwitch + VLAN 虚拟网络 (3)Neutron OpenvSwitch + GR ...