webpack 基本应用

遮天
177 阅读3分钟

开发体验

  1. 自动编译： 在打包时输入命令：yarn webpack --watch，开启webpack监听者模式，当JS发生变化时，webpack会自动实现打包，同时再开启另外一个命令终端：发布服务：serve dist。可以实现编辑代码保存的同时只需要去刷新浏览器就可以实现渲染，而不用重复的去手动操作打包任务。

  2. 自动刷新浏览器：工具插件：Browser-sync。

全局安装：yarn add browser-sync --save-dev

在开启webpack监听者模式前提下yarn webpack --watch：
启动服务： browser-sync dist --files '**/*'开启服务并监听dist下所有文件，实现代码编辑保存，浏览器自动刷新。

弊端：1、步骤操作繁琐：要同时使用两个插件监听；2、效率低：webpack编译之后存到磁盘，Browser-sync再从磁盘读取，需要两次的磁盘读写才能到浏览器上渲染。

  1. Webpack Dev Server 安装：yarn add webpack-dev-server --dev

webpack 内置的集成打包发布服务的插件，综合了上面两个插件的特性，弥补了上面的不足
a. 运行命令：yarn webpack-dev-server运行插件的同时，自动实现打包并开启 http serve运行打包结果，打包结果存放在内存中;
b. 唤醒浏览器：传入open参数：yarn webpack-dev-server --open

Source Map

是什么？

Source Map,顾名思义，是保存源代码映射关系的文件，相信用过webpack的开发者对它应该不会陌生。在项目开发完进行打包后，在打包的文件夹里通常除了js，css,图片字体等资源文件外，大家一定还见过xxx.js.map的文件。这种带map后缀的文件就是Source Map文件——它保存了源代码和转换之后代码（通常经过压缩混淆和其他转换）的关系。 下图展示了部分打包之后生成的Source Map文件：

{
  "version": 3,
  "sources": [
    "log.js",
    "main.js"
  ],
  "names": [
    "sayHello",
    "name",
    "length",
    "substr",
    "console",
    "log"
  ],
  "mappings": "AAAA,SAASA,SAAUC,MACjB,GAAIA,KAAKC,OAAS,EAAG,CACnBD,KAAOA,KAAKE,OAAO,EAAG,GAAK,MAE7BC,QAAQC,IAAI,QAASJ,MCJvBD,SAAS"
}

为什么要用 Source Map？

明白了什么是Source Map之后，大家肯定有个疑问，我们为什么需要Source Map? 由于现代前端项目的发展，前端代码变得越来越庞大和复杂。大部分源码都需要经过转换，才能投入到生产环境中使用。 常见的转换过程包括但不限于：

  1. 压缩混淆（UglifyJS）
  2. 编译（TypeScript, CoffeeScript)
  3. 转译（Babel）
  4. 合并多个文件，减少带宽请求。 经过上述转换过程的代码，往往都会变得面目全非，这样虽然对带宽很友好，但是调试起来就不是那么轻松了。我们在代码出错的时候，肯定最希望能定位其在源码中的位置。

Source Map实现原理

配置：

module.exports = {
    // ...,
    // devtool:'source-map',   // 配置 source map 属性
    devtool:'cheap-module-eval-source-map',   // 配置 source map 属性
    // ...
}

会在 bundle.js 最后通过注释的方式引入sourceMap文件：//# sourceMappingURL=bundle.js.map 代码执行到注释时，自动跳转到映射关系.map文件

Source Map 多种不同的打包模式：

微信截图_20210520193208.png 在开发环境中我们使用：cheap-module-eval-source-map

在生产环境中我们使用：cheap-module-source-map 或者 不使用，避免暴露源码。

HMR

HMR（Hot Module Replacement）模块热替换 或 模块热更新，和热拔插原理类似。

webpack 中的模块热替换就是指，在应用运行过程中实时替换某个模块，应用的运行状态不会受影响。

开启 HMR

HMR 已经集成在了 webpack-dev-server 中

开启HMR特性的方式有两种：可以通过命令开启HMR特性，也可以通过配置文件进行配置属性开启HMR特性

1、命令：

使用 HMR 只需要在运行webpack-dev-server命令时 使用 --hot 参数开启 HRM 的特性：webpack-dev-server --hot

2、配置：

avatar
文章
阅读
粉丝