web前端知识点（webpack篇）

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

四个概念

• entry：入口起点，可以配置多页面。
• output：出口，项目编译完成后之后文件输出路径。
• loader：webpack 自身只理解 JavaScript，loader 能够去处理非 JavaScript 文件并转化 JavaScript，处理源文件，一次处理一个。
• plugins：用来扩展 webpack 功能，插件能够执行很多任务。如：打包优化、压缩等。

核心对象

• Tapable：控制钩子的发布与订阅。
• Compiler：webpack 的编译器，继承 Tapable 对象，可以广播和监听 webpack 事件，webpack 生命周期值存在一个 Compiler 对象。Compiler 在 webpack 启动时创建实例，compiler 实例中包含 webpack 的完整配置，包括 loaders, plugins 信息。
• Compilation：编译器编译之后的资源信息对象，继承 Tapable 对象，可以广播和监听 webpack 事件，Compilation 实例仅代表一次 webpack 构建和生成编译资源的的过程。

webpack 开发模式开启 watch 选项，每次检测到入口文件模块变化时，会创建一次新的编译: 生成一次新的编译资源和新的 compilation 对象，这个 compilation 对象包含了当前编译的模块资源 module，编译生成的资源，变化的文件，依赖的的状态。

module、chunk、bundle

• module：js 模块，就是被 require 或 export 的模块，如：ES 模块、commonjs 模块、 AMD 模块。
• chunk：代码块，是进行依赖分析的时候，代码分割出来的代码块，包括一个或多个 module，是被分组了的 module 集合，code spliting 之后的就是chunk。
• bundle：文件，最终打包出来的文件，通常一个 bundle 对应一个 chunk。

打包原理

根据文件间的依赖关系对其进行静态分析，然后将这些模块按指定规则生成静态资源。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。webpack 有两种组织模块的依赖方式，同步、异步。异步依赖将作为分割点，形成一个新的块；在优化了依赖树之后，每一个异步区块都将作为一个文件被打包。

构建流程

• 生成 options（将 webpack.config.js 和 shell 中的参数合并到 options 对象）。
• 实例化 compiler 对象 （webpack 全局对象，包含 entry、output、loader、plugins等所有配置对象）。
• 实例化 compilation 对象（compiler.run 方法执行，开始编译过程，生成 compilation 对象）。
• 分析入口 js 文件，调用 AST 引擎处理入口文件，生成抽象语法树 AST，根据 AST 构建模块的所有依赖。
• 通过 loader 处理入口文件的所有依赖，转换为 js 模块，生成 AST，然后继续递归遍历，直至所有依赖被分析完毕。
• 对生成的所有 module 进行处理，调用 plugins，合并，拆分，生成 chunk。
• 将 chunk 生成为对应 bundle 文件，输出到目录。

HMR（热更新）

模块热替换功能会在应用程序应用过程中进行替换、添加或者删除模块，无需加载整个页面。主要通过以下几种方式：

• 保留在完全重新加载页面时丢失的应用程序状态。
• 只更逊变更内容，以节省宝贵的开发时间。
• 调整样式更加快速，几乎相当于在浏览器调试器中更改样式。

webpack 的热更新，只是提供一套接口和基础的模块替换的实现。开发者需要在代码中通过热更新的接口（module.hot.xxx）向 webpack 声明依赖模块和当前模块是否能够更新，以及更新的前后进行的处理。如果接受更新，那么需要开发者自己来在模块替换前清理或者保留必要的数据、状态，并在模块被替换后恢复之前的数据、状态。在 vue-cli 等脚手架中，热更新的开发者这边的工作是由 vue-loader、css-loader 等加载器已经完成了，再配合 webpack 的 module.hot 等 API 来完成了热更新。

大致热更新流程：webpack 进行文件变化监听，服务端和客户端使用 websocket 进行通信，服务端传递模块变化信息给客户端，客户端根据文件变化消息获取变更模块代码，进行模块的替换。

• 运行时开启热更新配置，在打包的 bundle 里面包含 HMR runtime 及 websocket 功能。
• 服务端与客户端建立 websocket 长连接。
• webpack 监听文件变化，文件保存时触发 webpack 重新编译，编译后代码保存在内存中。
• 编译时会生成 hot-update.json （已改动模块的 json）、hot-update.js （已改动模块的 js）。
• 通过 websocket 向客户端发送 hash 值。
• 客户端对比 hash 值，一致走缓存，不一致再通过 Ajax 获取 hot-update.json，json 包含模块 hash 值，再通过 jsonp 请求获取 hot-update.js。
• 热更新 js 模块，若失败，则 live reload 刷新浏览器代替热更新（若模块未配置热更新，则同样 live reload）。

webpack如何管理模块

当编译器开始运行、解析和映射应用程序时，manifest 数据集合会保留所有模块的详细要点。当完成打包并发送到浏览器时，会在运行通过 manifest 来解析和加载模块。无论选择哪种模块语法，import 或者 require 都已转换为 __webpack_require__ 方法，此方法指向模块标识符。通过使用 manifest 中的数据，runtime 能够查询模块标识符，检索出背后对应的模块。

style-loader 与 css-loader

css-loader 用来识别 css 文件，转为 js 对象。

style-loader 将 css-loader 编译之后的 js 对象转为 css 并插入 DOM 中。

tree shaking

移除 JavaScript 上下文中的未引用代码(dead-code)。

// 用法  package.json
{
  sideEffects: false
}

这个有一定的副作用：如果一个文件执行一些特殊功能，而不是仅仅暴露一个或多个 export，比如 polyfill，影响全局作用域，通常又不提供 export，那么它将会被移除。

如果所有代码都不含副作用，则可以标记为 false，如果有，那么就提供一个数组：

{
  "name": "your-project",
  "sideEffects": [
    "./src/some-side-effectful-file.js"
  ]
}

在项目中，任何导入的文件都受 tree shaking 影响，比如导入的 css 文件，我们则需要将它们添加进去：

{
  "name": "your-project",
  "sideEffects": [
    "./src/some-side-effectful-file.js",
    "*.css"
  ]
}

shimming全局变量

webpack 中如果需要用到的不规范的第三方库，有可能会引起全局依赖，如 jQuery 的 $。但是如果我们需要用到一个全局变量，可以使用 ProvidePlugin 后，能够在通过 webpack 编译的每个模块中，通过访问一个变量来获取到 package 包。如果 webpack 知道这个变量在某个模块中被使用了，那么 webpack 将在最终 bundle 中引入我们给定的 package。

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
 },
 plugins: [
   new webpack.ProvidePlugin({
     _: 'lodash'
   })
 ]
}

polyfills 加载优化

// 传统引入方式
npm install --save babel-polyfill

// src/main.js
import 'babel-polyfill';

......

polyfills 虽然是一种模块引入方式，但是并不推荐在主 bundle 中引入 polyfills，因为这不利于具备这些模块功能的现代浏览器用户，会使他们下载体积很大、但却不需要的脚本文件。

让我们把 import 放入一个新文件，并加入 whatwg-fetch polyfill：

npm install --save whatwg-fetch

// 新建 src/polyfills.js
import 'babel-polyfill';
import 'whatwg-fetch';

// webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  entry: {
    polyfills: './src/polyfills.js',
    index: './src/index.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

// index.html 然后根据条件引入
<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
  <script>
    var modernBrowser = (
      'fetch' in window &&
      'assign' in Object
    );

    if ( !modernBrowser ) {
      var scriptElement = document.createElement('script');

      scriptElement.async = false;
      scriptElement.src = '/polyfills.bundle.js';
      document.head.appendChild(scriptElement);
    }
  </script>
  </head>
  <body>
    <script src="index.bundle.js"></script>
  </body>
</html>

webpack 优化

• 保持 node.js 最新版本：较新的版本能够建立更高效的模块树以及提高解析速度。
• loaders 应用于最少数的必要模块：

  // no
  {
    test: /\.js$/,
    loader: "babel-loader"
  }
  
  // yes
  {
    test: /\.js$/,
    include: path.resolve(__dirname, "src"),
    loader: "babel-loader"
  }

• 尽量少使用不同的 loader/plugin 工具：每个额外的 loader/plugin 都有启动时间。
• 使用 Dlls：使用 DllPlugin 将更改不频繁的代码进行单独编译。这将改善引用程序的编译速度，即使它增加了构建过程的复杂性。
• 尽量保持 chunks 小巧：减少编译的整体大小，以提高构建性能。
• Worker Poll：thread-loader 可以将非常消耗资源的 loaders 转存到 worker pool 中。
• 持久化缓存：使用 cache-loader 启用持久化缓存。使用 package.json 中的 "postinstall" 清除缓存目录。
• 关闭 Source Maps：Source Maps很耗性能。
• 开发环境中避免用到只有在生产环境中才能用到的工具：

  UglifyJsPlugin
  ExtractTextPlugin
  [hash]/[chunkhash]
  AggressiveSplittingPlugin
  AggressiveMergingPlugin
  ModuleConcatenationPlugin

未完待续......