输出(Output)配置详解

输出(Output)配置详解

Webpack的output配置决定了打包后的文件如何命名、存放以及如何被引用。它控制着bundle的生成方式，直接影响最终产物的结构和加载行为。

基本输出配置

最基本的输出配置需要指定两个属性：

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

path必须是绝对路径，表示输出目录的位置。filename指定主入口文件的名称。当有多个入口时，可以使用占位符：

module.exports = {
  entry: {
    app: './src/app.js',
    admin: './src/admin.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  }
}

文件名占位符

Webpack提供了多种占位符用于动态生成文件名：

• [name]: 入口名称
• [hash]: 构建哈希值
• [chunkhash]: 每个chunk的哈希
• [id]: chunk id
• [query]: 模块查询参数

output: {
  filename: '[name].[chunkhash:8].js',
  chunkFilename: '[id].[chunkhash:8].chunk.js'
}

:8表示只取哈希值的前8位。chunkFilename用于非入口chunk的文件命名。

公共路径配置

publicPath非常重要，它决定了如何从客户端访问这些资源：

output: {
  publicPath: '/assets/',
  path: path.resolve(__dirname, 'dist')
}

假设最终生成的文件在dist/assets/main.js，那么：

• /assets/: 文件将通过/assets/main.js访问
• ./: 相对路径访问
• https://cdn.example.com/: 使用CDN地址

输出库配置

当打包一个库时，需要配置library相关选项：

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

libraryTarget支持多种模块化方案：

• var: 作为变量导出
• this: 挂载到this上
• window: 浏览器环境全局变量
• umd: 通用模块定义
• commonjs2: CommonJS模块

高级输出配置

清理输出目录

使用clean选项可以自动清理输出目录：

output: {
  clean: true
}

跨域加载配置

对于需要跨域加载的资源，可以配置crossOriginLoading：

output: {
  crossOriginLoading: 'anonymous'
}

可选值：

• false: 禁用
• 'anonymous': 匿名跨域请求
• 'use-credentials': 带凭证的跨域请求

辅助注释

添加banner或footer注释：

output: {
  banner: '/*! 版本: 1.0.0 */',
  footer: '/* 构建于: ' + new Date().toLocaleString() + ' */'
}

多配置输出

在复杂项目中，可能需要针对不同环境输出不同配置：

module.exports = [{
  name: 'client',
  output: {
    path: path.resolve(__dirname, 'dist/client'),
    filename: 'client.bundle.js'
  }
}, {
  name: 'server',
  target: 'node',
  output: {
    path: path.resolve(__dirname, 'dist/server'),
    filename: 'server.bundle.js',
    libraryTarget: 'commonjs2'
  }
}]

性能优化相关

路径信息

pathinfo控制是否在bundle中包含模块路径信息：

output: {
  pathinfo: process.env.NODE_ENV === 'development'
}

开发环境开启有助于调试，生产环境应关闭以减小体积。

长效缓存

利用contenthash实现长效缓存：

output: {
  filename: '[name].[contenthash:8].js',
  chunkFilename: '[name].[contenthash:8].chunk.js'
}

特殊场景处理

微前端应用

在微前端架构中，需要特别注意公共路径：

output: {
  publicPath: 'http://localhost:3001/',
  jsonpFunction: 'webpackJsonp_childApp',
  uniqueName: 'childApp'
}

jsonpFunction和uniqueName可以避免多个应用间的冲突。

Web Worker输出

为Web Worker单独配置输出：

output: {
  workerChunkLoading: 'import-scripts',
  workerWasmLoading: 'fetch'
}

自定义输出

通过插件可以完全自定义输出行为：

class CustomOutputPlugin {
  apply(compiler) {
    compiler.hooks.emit.tap('CustomOutput', (compilation) => {
      // 自定义处理compilation.assets
    });
  }
}

现代浏览器优化

利用module和nomodule实现现代/传统浏览器差异化加载：

output: {
  filename: ({ chunk }) => {
    return chunk.name === 'modern' ? '[name].mjs' : '[name].js';
  }
}

然后在HTML中：

<script type="module" src="modern.mjs"></script>
<script nomodule src="legacy.js"></script>