Webpack 入门

什么是 Webpack

Webpack 是静态模块打包器，当 webpack 处理应用程序时，会将所有这些模块打包成一个或多个文件。Webpack 可以处理 js/css/图片、图标字体等单位。

Webpack 没办法处理动态的内容，只能处理静态的。

核心概念

• entry：指定入口文件
• output：指定输出相关信息
• loader：处理非JS文件的模块
• plugins：执行范围更广的任务

配置项

配置结构

Webpack 支持单个配置、数组和函数方式配置运行参数，以适配不同场景应用需求，它们之间区别如下：

• 单个配置对象：比较常用的一种方式，逻辑简单，适合大多数业务项目
• 配置对象数组：每个数组项都是一个完整的配置对象，每个对象都会触发一次单独的构建，通常用于需要为同一份代码构建多种产物的场景，如 Library
• 函数：Webpack 启动时会执行该函数获取配置，我们可以在函数中根据环境参数(如 NODE_ENV)动态调整配置对象

使用配置数组

导出数组的方式很简单，如：

// webpack.config.js
module.exports = [{
  entry: './src/index.js',
  // 其它配置...
}, {
  entry: './src/index.js',
  // 其它配置...
}];

使用数组方式时，Webpack 会在启动后创建多个 Compilation 实例，并行执行构建工作，但需要注意，Compilation 实例间基本上不作通讯，这意味着这种并行构建对运行性能并没有任何正向收益，例如某个 Module 在 Compilation 实例 A 中完成解析、构建后，在其它 Compilation 中依然需要完整经历构建流程，无法直接复用结果。

数组方式主要用于应对“同一份代码打包出多种产物”的场景，例如在构建 Library 时，我们通常需要同时构建出 ESM/CMD/UMD 等模块方案的产物，如：

// webpack.config.js
module.exports = [
  {
    output: {
      filename: './dist-amd.js',
      libraryTarget: 'amd',
    },
    name: 'amd',
    entry: './app.js',
    mode: 'production',
  },
  {
    output: {
      filename: './dist-commonjs.js',
      libraryTarget: 'commonjs',
    },
    name: 'commonjs',
    entry: './app.js',
    mode: 'production',
  },
];

使用配置函数

配置函数方式要求在配置文件中导出一个函数，并在函数中返回 Webpack 配置对象，或配置数组，或 Promise 对象，如：

module.exports = function(env, argv) {
  // ...
  return {
    entry: './src/index.js',
    // 其它配置...
  }
}

运行时，Webpack 会传入两个环境参数对象：

• env：通过 --env 传递的命令行参数，适用于自定义参数
• argv：命令行 Flagsopen in new window 参数，支持 entry/output-path/mode/merge 等