学习笔记二十六 —— webpack实现差异化构建Webpack 实现差异构建（为 Web 端和 Node 端输出两套优

Webpack 实现差异构建（为 Web 端和 Node 端输出两套优化包）需深入理解其模块处理机制和构建流程，核心在于环境感知、代码分割、资源处理差异化和运行时优化。以下从原理到实践展开设计思路：

一、核心原理：多环境构建的底层逻辑

Webpack 的构建流程基于 依赖图（Dependency Graph）：

入口解析：从入口文件递归分析模块依赖。
Loader 处理：将非 JS 资源（CSS、图片等）转换为模块。
插件优化：在编译生命周期钩子中修改模块输出（如代码压缩）。
输出生成：将处理后的模块组合为 Bundle。

差异构建的关键：通过配置分离 Web 和 Node 的入口、Loader 规则、插件逻辑，使 Webpack 生成两套独立的依赖图。

二、环境区分策略：动态配置注入

1. 命令行参数 + 条件分支

使用 --env 参数传递目标环境：

webpack --env target=web  # 或 --env target=node

在配置文件中动态生成配置：

module.exports = (env) => {
  const isWeb = env.target === "web";
  return {
    entry: isWeb ? "./src/web.js" : "./src/node.js",
    output: { filename: isWeb ? "web.bundle.js" : "node.bundle.js" },
    // 其他差异化配置...
  };
};

2. 环境变量注入（DefinePlugin）

将环境标识注入代码，供运行时判断：

new webpack.DefinePlugin({
  __IS_WEB__: JSON.stringify(env.target === "web"),
});

代码中按环境执行逻辑：

if (__IS_WEB__) {
  // Web 端专用逻辑（如 DOM 操作）
} else {
  // Node 端专用逻辑（如文件读写）
}

注意：DefinePlugin 直接替换文本，需避免泄露敏感信息。

三、构建优化策略：针对性剪裁代码

1. Tree Shaking 差异化

Web 端：启用 optimization.usedExports 移除未使用代码。
Node 端：关闭 Tree Shaking（Node 支持 CommonJS 动态引入，静态分析易误删）。

2. 依赖提取（SplitChunks）

Web 端：提取第三方库（如 lodash）到 vendor.js，利用浏览器缓存。

optimization: {
  splitChunks: { chunks: "all" } // 提取公共模块
}

Node 端：不提取依赖，因 Node 模块系统已缓存加载的包。

3. 运行时分离

Web 端：分离运行时代码到独立文件，避免业务代码变更导致缓存失效：
```
optimization: { runtimeChunk: "single" } // 生成 runtime~web.js
```
Node 端：内联运行时（Node 无缓存失效问题）。

四、资源处理差异化：Loader 与插件

1. 资源加载策略

资源类型	Web 端处理方案	Node 端处理方案
CSS/图片	使用 `style-loader`/`file-loader`	忽略或替换为空模块（`null-loader`）
Node 原生模块	排除（`externals`）	直接打包（如 `fs`、`path`）

2. 配置示例

module: {
  rules: [
    // Web 端处理 CSS
    isWeb && { test: /\.css$/, use: ["style-loader", "css-loader"] },
    // Node 端忽略 CSS
    !isWeb && { test: /\.css$/, use: "null-loader" },
    // 排除 Node 原生模块（Web 端）
    isWeb && { test: /node:/, use: "null-loader" }
  ].filter(Boolean),
},
externals: isWeb ? ["node:fs"] : [] // Web 端排除 fs 模块

五、模块系统兼容性处理

1. 输出格式（Output Format）

Web 端：默认使用 ES Module（异步加载）或 UMD（兼容旧浏览器）。
Node 端：强制 CommonJS，避免 ESM 的 import/export 语法报错：
```
output: { library: { type: "commonjs2" } }
```

2. 动态导入（Dynamic Import）

Web 端：保留 import() 语法，实现按需加载。
Node 端：编译为 require.ensure 或直接内联（减少文件 I/O）。

六、生产环境优化扩展

压缩工具选择：
- Web 端：TerserPlugin 压缩 JS + CssMinimizerPlugin 压缩 CSS。
- Node 端：仅用 TerserPlugin（无需 CSS 处理）。
Source Map：
- Web 端：生成 eval-source-map（开发调试）或 hidden-source-map（生产）。
- Node 端：关闭 Source Map（日志可定位源码）。

总结：设计要点与风险控制

核心思路：环境感知配置 + 资源剪裁 + 运行时优化。
性能权衡：Web 侧重缓存与体积，Node 侧重启动速度与模块复用。
潜在风险：
- 环境判断逻辑错误（如 Web 代码混入 Node API），需通过 ESLint 规则约束。
- 依赖提取过度导致 Node 包碎片化（影响 require 性能）。

通过以上策略，Webpack 可高效输出两套独立优化的包，兼顾 Web 的加载性能与 Node 的运行效率。实际项目中可结合 webpack-merge 拆分配置，提升可维护性。