Webpack 开发工具与模块热替换

Webpack 开发工具与模块热替换

​⚠️ 注意: 永远不要在生产环境中使用这些工具,永远不要。

devtool

当 JavaScript 异常抛出时,你常会想知道这个错误发生在哪个文件的哪一行。然而因为 webpack 将文件输出为一个或多个 bundle,所以 追踪这一错误会很不方便。

Source maps 试图解决这一问题。它有很多选择,各有优劣:

devtool

build

rebuild

production

quality

eval

+++

+++

no

generated code

cheap-eval-source-map

+

++

no

transformed code (lines only)

cheap-source-map

+

o

yes

transformed code (lines only)

cheap-module-eval-source-map

o

++

no

original source (lines only)

cheap-module-source-map

o

-

yes

original source (lines only)

eval-source-map

--

+

no

original source

source-map

--

--

yes

original source

nosources-source-map

--

--

yes

without source content

+ 表示较快,- 表示较慢,o 表示时间相同

对于开发环境,通常希望更快速的 Source Map,需要添加到 bundle 中以增加体积为代价,但是对于生产环境,则希望更精准的 Source Map,需要从 bundle 中分离并独立存在。

个人建议:开发环境使用 cheap-module-eval-source-map ;开发环境使用 cheap-module-source-map

使用方式非常简单,在 webpack.config.js 中配置如下:

module.exports = {
  // 通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试
  // devtool: "eval", // 没有模块映射,而是命名模块。以牺牲细节达到最快。
  // devtool: "source-map", // 牺牲了构建速度的 `source-map' 是最详细的
  // devtool: "inline-source-map", // 嵌入到源文件中
  // devtool: "eval-source-map", // 将 SourceMap 嵌入到每个模块中
  // devtool: "hidden-source-map", // SourceMap 不在源文件中引用
  // devtool: "cheap-source-map", // 没有模块映射(module mappings)的 SourceMap 低级变体(cheap-variant)
  // devtool: "cheap-module-source-map", // 有模块映射(module mappings)的 SourceMap 低级变体
  devtool: "cheap-module-eval-source-map",
};

webpack-dev-server

webpack-dev-server 可以提供了一个服务器和实时重载(live reloading) 功能。

在开始前,确定你有一个 index.html 文件指向你的 bundle。假设 output.filename 是 bunlde.js

<html>
<body>
<script type="text/javascript" src="./dist/bundle.js"></script>
</body>
</html>

首先从 npm 安装 webpack-dev-server

$ npm install --save-dev webpack-dev-server

安装完成之后,你应该可以使用 webpack-dev-server 了,方式如下:

$ webpack-dev-server --open

上述命令应该自动在浏览器中打开 http://localhost:8080

​? 提示: 本教程中的 示例代码 除了 demo00 ,都可以使用 webpack-dev-server 命令启动服务。

在你的文件中做一点更改并且保存。你应该可以在控制台中看到正在编译。编译完成之后,页面应该会刷新。如果控制台中什么都没发生,你可能需要调整下 watchOptions

默认情况下 webpack 会使用inline mode(内联模式)。这种模式在你的 bundle 中注入客户端(用来 live reloading 和展示构建错误)。Inline 模式下,你会在你的 DevTools 控制台中看到构建错误。

webpack-dev-server 可以做很多事情,比如转发请求到你的后端服务器。

webpack-dev-server 支持很多 cli 参数,来手动配置服务的选项。

但是,个人建议,一种更好的做法是在 webpack.config.js 文件中通过配置 devServer 属性来配置 webpack-dev-server 。

更多配置项参考:官方文档 - 开发中 Server(DevServer)

​? 示例DEMO12: (DEMO / SOURCE) 在本示例中,devServer 配置如下: devServer: { contentBase: [path.join(__dirname, "dist")], compress: true, port: 9000, // 启动端口号 inline: true, } 执行 webpack-dev-server 后,会启动一个端口为 9000 的本地服务。

热模块替换(Hot Module Replacement)

​?​ 提示: 模块热替换功能一般用于开发环境。

现在你有了实时重载功能,你甚至可以更进一步:Hot Module Replacement(热模块替换)。这是一个接口,使得你可以替换模块而不需要刷新页面。不用每次修改都重新启动服务,这可以极大地提高开发效率。

那么,如何配置 webpack 来实现热替换呢?

请按以下步骤一步步来:

首先,安装依赖  react-hot-loader(确保使用这个包的 next 版本)

$ npm install --save babel-loader react-hot-loader@next

配置 entry

你需要定义几个用于热替换的入口路径

entry: {
  main: [
    // App 入口
    "./app/index",

    // 开启 React 代码的模块热替换(HMR)
    'react-hot-loader/patch',

    // 为 webpack-dev-server 的环境打包代码
    // 然后连接到指定服务器域名与端口
    'webpack-dev-server/client?http://localhost:9000',

    // 为热替换(HMR)打包好代码
    // only- 意味着只有成功更新运行代码才会执行热替换(HMR)
    'webpack/hot/only-dev-server',
  ],
},

配置 output

publicPath 对于热替换(HMR)是必须的,让 webpack 知道在哪里载入热更新的模块(chunk)

output: {
  ... ...
  // 对于热替换(HMR)是必须的,让 webpack 知道在哪里载入热更新的模块(chunk)
  publicPath: "/"
},

配置 module

需要使用 ES2015 模块来使 HMR 正常工作。为此,在我们的 es2015 preset 设置中,将 module 选项设置为 false。

并且,在此要引入 react-hot-loader/babel 开启 React 代码的模块热替换(HMR)

module: {

    rules: [
      {
        // 语义解释器,将 js/jsx 文件中的 es2015/react 语法自动转为浏览器可识别的 Javascript 语法
        test: /\.jsx?$/,
        include: path.resolve(__dirname, "app"),
        exclude: /node_modules/,

        // 应该应用的 loader,它相对上下文解析
        // 为了更清晰,`-loader` 后缀在 webpack 2 中不再是可选的
        // 查看 webpack 1 升级指南。
        loader: "babel-loader",

        // loader 的可选项
        options: {
          presets: [
            // webpack 现在已经支持原生的 import 语句了, 并且将其运用在 tree-shaking 特性上
            [
              "es2015",
              {
                "modules": false
              }
            ],

            "react" // 转译 React 组件为 JavaScript 代码
          ],
          plugins: [
            "react-hot-loader/babel" // 开启 React 代码的模块热替换(HMR)
          ]
        },
      },
    ]
  },

配置 devServer

此处,也需要引入 publicPath ,且和上文 outputpublicPath 值保持一致。

hot 属性需要置为 true,表示开启服务器的模块热替换。

devServer: {
  contentBase: [path.join(__dirname, "dist")],
  compress: true,
  port: 9000, // 启动端口号
  hot: true, // 启用 webpack 的模块热替换特性
  inline: true,
  publicPath: "/", // 和上文 output 的“publicPath”值保持一致
}

配置 plugins

最后,需要开启 webpack 自带的 HotModuleReplacementPluginNamedModulesPlugin 插件,启动热替换功能。

plugins: [
  // 开启全局的模块热替换(HMR)
  new webpack.HotModuleReplacementPlugin(),

  // 当模块热替换(HMR)时在浏览器控制台输出对用户更友好的模块名字信息
  new webpack.NamedModulesPlugin(),
],

​? 示例DEMO13: (SOURCE) 在示例中,启动服务后,打开浏览器,访问 http://localhost:9000/ 。 按快捷键 F12 打开浏览器调试窗口,可以看到类似提示信息 [HMR] Waiting for update signal from WDS... [HMR] Waiting for update signal from WDS... [WDS] Hot Module Replacement enabled. 这表示热替换功能已启动。 修改 app/index.jsx 文件,来看看热替换的效果: 修改前: ReactDOM.render( <Welcome name="Victor Zhang"/>, document.getElementById("root") ); 修改后: ReactDOM.render( <Welcome name="guest"/>, document.getElementById("root") ); 此时,应该看到页面内容会替换为你修改的内容。

Webpack 系列教程

欢迎阅读其它内容:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏运维小白

12.22 php-fpm慢执行日志

php-fpm慢执行日志目录概要 vim /usr/local/php-fpm/etc/php-fpm.d/www.conf//加入如下内容 request_s...

2977
来自专栏韩伟的专栏

状态模式:一个Epoll边缘触发的代理服务器设计

设计模式是一门热门的知识,但是何时应该用哪个,却往往不容易掌握,本文以一个Socks5代理服务器的设计为例,介绍状态模式的实践用法。 软件的功能介绍 提供Soc...

4387
来自专栏IT笔记

本地私服仓库nexus3.3.1使用手册

私服架构 私服是指私有服务器,是架设在局域网的一种特殊的远程仓库,目的是代理远程仓库及部署第三方构建。有了私服之后,当 Maven 需要下载构件时,直接请求私服...

7237
来自专栏菩提树下的杨过

MRTG FOR WINDOWS 安装指南

MRTG(Multi Router Traffic Grapher),通常讲是一个监控网络链路流量负载的开源软件,它可以从所有运行SNMP协议的设备上(包括服务...

23110
来自专栏Brian

Linux 系统优化

概述 在Linux 学习笔记一大体介绍了一些简单的Linux知识和一些简单的优化。下面我们来学习一下Linux和Linux一些安全知识(Linux是基于内核为...

3706
来自专栏郑家乐的专栏

多版本 Node.js 使用 Workflow

NodeJS 成为新一届的版本帝后,需要预编译的模块常常更新不够及时,就会出现我这样上班时间搞环境 ,那么如何保持一机多版本继续使用低版本的 NodeJS 运行...

2370
来自专栏Web 开发

Web前端安全学习-CSRF

在数据库有了一层安全保护之后,攻击者们的目标,从服务器转移到了用户身上。由此,出现了CSRF攻击和XSS攻击。

750
来自专栏北京马哥教育

十二条Linux运维面试必备经典笔试/面试题,来挑战一下!

又到了一年一度的秋招,作为运维方向,看了一些面经,收集了一些笔试面试题,总结了一下,贴出来仅供参考,有错误的地方还请指出. 1.Linux设置环境变量 暂时的:...

4449
来自专栏xcywt

WireShark 使用

1、干货 Wireshark(前称Ethereal)是一个网络封包分析软件。网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料。Wire...

2169
来自专栏linux运维学习

linux学习第二十八篇:监控io性能,free命令,ps命令,查看网络状态,linux下抓包

监控磁盘io性能 (命令:iostat,iotop) 查看磁盘读写状态: iostat -x %util:表示io等待,也就是磁盘使用占用cpu百分比。...

5389

扫码关注云+社区