2.4 打包配置

📦 Webpack

原文地址： https://juejin.cn/post/6970691644114862111/

本文将介绍项目的打包配置功能。

🚨 项目中 webpack 版本为 4.X,文中涉及语法、功能与最新版本5.X相比存在变化。

📝 commonjs vs commonjs2

接下来配置 libraryTarget的选项中可以看到'commonjs'、'commonjs2'。两者之前的有什么区别？

commonjs 规范只定义了exports， 而 module.exports 是nodejs对commonjs的实现， 这种扩展实现称为commonjs2。

// commonjs
exports.a = "a";
exports.b = "b";

// commonjs2
module.exports = {
  a: "a",
  b: "b",
};

参考https://github.com/webpack/webpack/issues/1114

build/config.js

文件内容是打包配置的公用配置。

carbon (40).png

外部扩展(externals) 从输出的 bundle 中排除依赖,在运行时(runtime)从外部获取这些扩展依赖(external dependencies),主要解决组件依赖导致代码冗余问题。其中 exports.externals = externals; 内容格式如下 👇。

carbon (41).png

build/webpack.common.js

以 commonjs2 规范打包构建类库。

• 调用命令：webpack --config build/webpack.common.js。

• 入口文件：src/index.js。

• 输出文件：以commonjs2规范构建输出到lib/element-ui.common.js（类库主入口文件）。

image.png

build/webpack.component.js

以 commonjs2 规范对每个组件单独打包构建，支持按需引入。

• 调用命令：webpack --config build/webpack.component.js。

• 入口文件：components.json中的组件列表。

• 输出文件：把packages目录下的组件，以commonjs2规范单独构建输出到lib/components-name.js。

image.png

build/webpack.conf.js

以 umd 规范打包构建类库,不仅可以 NodeJs 环境使用，也可以在浏览器环境（browser）使用，需要设置umdNamedDefine: true。

• 调用命令：webpack --config build/webpack.conf.js。

• 入口文件：src/index.js。

• 输出文件：以umd规范构建输出到lib/index.js。

image.png

externals 配置

通过这种方式引入的依赖库，不会打包到 bundle 中。以下任何一种形式在各种模块上下文使用：

• root：可以通过一个全局变量访问 library（例如，通过 script 标签）。

• commonjs：可以将 library 作为一个 CommonJS 模块访问。

• commonjs2：和上面的类似，但导出的是 module.exports.default。

• amd：类似于 commonjs，但使用 AMD 模块系统。

一个形如 { root, amd, commonjs, ... } 的对象仅允许用 libraryTarget: 'umd' 这样的配置.

  // 防止将某些 import 的包(package)打包到 bundle 中，
  // 在运行时(runtime)再去从外部获取这些扩展依赖
  externals: {
    // config.vue
    // {
    //   root: 'Vue',
    //   commonjs: 'vue',
    //   commonjs2: 'vue',
    //   amd: 'vue'
    // }
    vue: config.vue
  },

生成lib\index.js中，依赖库vue引入声明代码如下：

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === "object" && typeof module === "object")
    module.exports = factory(require("vue"));
  else if (typeof define === "function" && define.amd)
    define("ELEMENT", ["vue"], factory);
  else if (typeof exports === "object")
    exports["ELEMENT"] = factory(require("vue"));
  else root["ELEMENT"] = factory(root["Vue"]);
});

build/webpack.demo.js

提供了两套打包配置，生产模式用于项目网站的构建，开发模式用于组件展示测试的构建。使用了 CSS、JS 构建的优化插件，还配置 splitChunks抽取公共模块解决重复引入第三方库的问题。

npm run deploy:build 命令打包构建项目网站。

• 调用命令：webpack --config build/webpack.demo.js。

• 模式：production。

• 入口文件：examples/entry.js。

• 输出文件：构建内容输出至examples/element-ui/目录下。

npm run deploy:build 命令打包运行项目网站，用于开发调试。

• 调用命令：webpack-dev-server --config build/webpack.demo.js。

• 模式：development。

• 入口文件：examples/entry.js。

• 输出文件：构建内容输出至examples/element-ui/目录下。

npm run dev:play 命令用于组件库开发中的功能展示。

• 调用命令：webpack-dev-server --config build/webpack.demo.js。

• 模式：development。

• 入口文件：examples/entry.js。

• 输出文件：构建内容输出至examples/element-ui/目录下。

carbon (37).png

build/webpack.extension.js

用于构建名为Element Theme Roller的 chorme 插件项目，复用大部分 webpack.demo.js 打包配置。npm run deploy:extension用于项目生产发布；npm run dev:extension用于开发调试。

• 调用命令：webpack --config build/webpack.extension.js。

• 入口文件：examples/extension/src/background.js和examples/extension/src/entry.js。

• 输出文件：构建内容输出至examples/extension/dist目录下。生成文件 background.js entry.js ,复制文件 icon.png manifest.json 。

image.png

build/webpack.test.js

用于 test/unit/karma.conf.js 中打包配置。

// test/unit/karma.conf.js
const webpackConfig = require('../../build/webpack.test');

module.exports = function(config) {
  const configuration = {
    ...
    webpack: webpackConfig,
    ...
  };

  config.set(configuration);
};

关联阅读

点击以下链接，可以快速查看本系列其他文章： 专栏/Element 2.X 源码学习

👇 项目工程化系列文章链接如下，推荐按照顺序阅读文章 👇。

1️⃣ 源码剖析之工程化：项目概览、package.json、npm script 2️⃣ 源码剖析之工程化：项目构建、MD 解析 3️⃣ 源码剖析之工程化：打包配置 4️⃣ 源码剖析之工程化：发布部署、持续集成 5️⃣ 源码剖析之工程化：主题构建、自动化测试、代码质量检查、类型声明 6️⃣ 源码剖析之工程化：项目网站 7️⃣ 源码剖析之工程化：命令之图解