输出文件生成过程

输出文件生成过程

Webpack 的输出文件生成过程是其打包流程的最后阶段，涉及代码分割、资源合并、文件名处理等关键操作。这个阶段决定了最终产物的结构和内容，直接影响应用性能和加载策略。

配置输出选项

输出配置通过 output 对象定义，最基本的配置包括文件名和输出目录：

module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

当启用代码分割时，需要动态生成多个输出文件：

output: {
  filename: '[name].[contenthash].js',
  path: path.resolve(__dirname, 'dist'),
  chunkFilename: '[id].[chunkhash].js'
}

文件名模板与哈希策略

Webpack 支持多种占位符生成动态文件名：

• [name]: 入口名称
• [hash]: 项目级哈希
• [chunkhash]: 分块哈希
• [contenthash]: 内容哈希
• [id]: 分块ID

// 生产环境推荐使用内容哈希
output: {
  filename: '[name].[contenthash:8].js',
  assetModuleFilename: 'assets/[hash][ext][query]'
}

代码分块策略

分块配置直接影响输出文件结构：

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10
      },
      default: {
        minChunks: 2,
        priority: -20
      }
    }
  }
}

资源模块处理

Webpack 5 的资源模块会生成独立文件：

module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif)$/i,
      type: 'asset/resource',
      generator: {
        filename: 'static/images/[hash][ext]'
      }
    }
  ]
}

运行时代码生成

Webpack 会生成运行时代码管理模块加载：

// 可配置独立运行时文件
output: {
  runtimeChunk: 'single'
}

清单文件生成

Webpack 会生成 manifest 记录模块映射关系：

// 典型输出结构
{
  "main.js": "main.abc123.js",
  "vendor.js": "vendor.def456.js",
  "runtime.js": "runtime.ghi789.js"
}

自定义输出处理

通过插件可以干预输出过程：

class LogAssetsPlugin {
  apply(compiler) {
    compiler.hooks.emit.tap('LogAssetsPlugin', (compilation) => {
      for (const asset in compilation.assets) {
        console.log(`生成文件: ${asset} (${compilation.assets[asset].size()} bytes)`);
      }
    });
  }
}

多目标输出配置

支持同时输出多种格式：

module.exports = [{
  output: {
    filename: 'amd.js',
    libraryTarget: 'amd'
  }
}, {
  output: {
    filename: 'commonjs.js',
    libraryTarget: 'commonjs'
  }
}];

输出优化处理

Tree Shaking 会影响最终输出内容：

optimization: {
  usedExports: true,
  minimize: true,
  minimizer: [
    new TerserPlugin({
      extractComments: false,
    }),
  ],
}

路径解析与公共路径

publicPath 配置影响资源引用路径：

output: {
  publicPath: 'https://cdn.example.com/assets/',
  filename: '[name].js'
}

跨域加载配置

支持输出符合跨域要求的格式：

output: {
  crossOriginLoading: 'anonymous',
  chunkLoadTimeout: 120000
}

输出文件排序

控制输出文件的顺序：

plugins: [
  new webpack.optimize.ModuleConcatenationPlugin(),
  new webpack.optimize.OccurrenceOrderPlugin()
]

动态导入输出

动态导入会生成独立分块：

// 原代码
import(/* webpackChunkName: "lazy-module" */ './lazy').then(...);

// 输出
// lazy-module.[hash].js

库模式输出

构建库时的特殊输出配置：

output: {
  library: 'MyLibrary',
  libraryTarget: 'umd',
  globalObject: 'this',
  umdNamedDefine: true
}

错误处理策略

输出阶段的错误处理：

output: {
  strictModuleExceptionHandling: true,
  pathinfo: process.env.NODE_ENV !== 'production'
}

性能相关配置

影响输出性能的参数：

output: {
  pathinfo: false, // 生产环境应关闭
  futureEmitAssets: true
}

浏览器缓存优化

通过哈希实现长期缓存：

output: {
  filename: '[name].[contenthash].js',
  chunkFilename: '[name].[contenthash].chunk.js'
},
optimization: {
  runtimeChunk: 'single',
  moduleIds: 'deterministic'
}

多页面应用输出

为每个页面生成独立入口：

entry: {
  page1: './src/page1.js',
  page2: './src/page2.js'
},
output: {
  filename: '[name].bundle.js'
}

输出后处理钩子

通过插件处理输出文件：

compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
  fs.writeFileSync(
    path.join(compilation.outputOptions.path, 'build-info.json'),
    JSON.stringify({ buildTime: new Date() })
  );
});