webpack高级进阶

[zhaobinglong]

webpack的本质

一个打包器，根据文件的引用关系，结合loader和plugin，将源代码打包编译为目标代码

webpack3/4对比

• mode配置，只有两种值development | production。对不同的环境他会启用不同的配置。webpack4中通过内置的mode使用相应模式的内置优化。比如设置mode等于'development'，会将 process.env.NODE_ENV 的值设为 development。设置mode等于'production'，会将 process.env.NODE_ENV 的值设为 production。production 侧重于打包后的文件大小，development侧重于构建。
• 移除CommonsChunkPlugin。webpack.optimize.CommonsChunkPlugin已经从webpack4中移除。可使用optimization.splitChunks进行模块划分（提取公用代码）。
• 增加mini-css-extract-plugin （CSS文件提取）。webpack4，删除原 extract-text-webpack-plugin 配置，增加 mini-css-extract-plugin 配置
• 移除loaders，必须使用rules（在3版本的时候loaders和rules 是共存的但是到4的时候只允许使用rules）

webpack5

• 使用持久化缓存提高构建性能；
• 使用更好的算法和默认值改进长期缓存（long-term caching）；
• 清理内部结构而不引入任何破坏性的变化；
• 引入一些breaking changes，以便尽可能长的使用v5版本。
• 支持ES6
• 更智能的tree shaking。基于js的预编译阶段，分析模式是否被用到

[zhaobinglong]

webpack 插件的构成

• 一个 JavaScript 命名函数。
• 在插件函数的 prototype 上定义一个 apply 方法。
• 指定一个绑定到 webpack 自身的事件钩子。
• 处理 webpack 内部实例的特定数据。
• 功能完成后调用 webpack 提供的回调。

自定义一个webpack plugin

// 一个 JavaScript 命名函数。
function MyExampleWebpackPlugin() {};

// 在插件函数的 prototype 上定义一个 `apply` 方法。
MyExampleWebpackPlugin.prototype.apply = function(compiler) {
  // 指定一个挂载到 webpack 自身的事件钩子。
  compiler.plugin('webpacksEventHook', function(compilation /* 处理 webpack 内部实例的特定数据。*/, callback) {
    console.log("This is an example plugin!!!");

    // 功能完成后调用 webpack 提供的回调。
    callback();
  });
};

link：https://www.webpackjs.com/contribute/writing-a-plugin/

Compiler 和 Compilation

在插件开发中最重要的两个资源就是 compiler 和 compilation 对象。理解它们的角色是扩展 webpack 引擎重要的第一步。

compiler 对象代表了完整的 webpack 环境配置。这个对象在启动 webpack 时被一次性建立，并配置好所有可操作的设置，包括 options，loader 和 plugin。当在 webpack 环境中应用一个插件时，插件将收到此 compiler 对象的引用。可以使用它来访问 webpack 的主环境。

compilation 对象代表了一次资源版本构建。当运行 webpack 开发环境中间件时，每当检测到一个文件变化，就会创建一个新的 compilation，从而生成一组新的编译资源。一个 compilation 对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息。compilation 对象也提供了很多关键时机的回调，以供插件做自定义处理时选择使用。

[zhaobinglong]

自定义webpack loader

参考

团队内部使用的一个loader，可以在平台上的icon资源更新后，自动拉取icon资源到项目本地

rules: [
  {
    test: /\.js$/,
    loader: '@megvii-icons/pull-svg-icons',
    options: {
      requestUri: 'https://fe-cms.mcd.megvii-inc.com/v1/feicons/svg/pullSvgIcons',
      projects: 'megdesign'
    }
  }
]