webpack核心概念之output怎么配置

发布时间：2022-08-10 09:37:16 作者：iii
来源：亿速云阅读：310

Webpack核心概念之output怎么配置

引言

在现代前端开发中，Webpack 已经成为了一个不可或缺的工具。它不仅能够帮助我们打包 JavaScript 文件，还能处理 CSS、图片、字体等各种资源。Webpack 的核心概念之一就是 output，它决定了打包后的文件如何输出以及输出到哪里。本文将深入探讨 output 的配置，帮助开发者更好地理解和掌握这一重要概念。

1. 什么是 `output`？

output 是 Webpack 配置中的一个重要选项，用于指定打包后的文件如何输出以及输出到哪里。它决定了打包后的文件的名称、路径、公共路径等。通过合理配置 output，我们可以控制打包后的文件结构，使其更符合项目的需求。

2. `output` 的基本配置

2.1 `output.filename`

output.filename 用于指定打包后的文件的名称。它可以是一个静态字符串，也可以是一个动态生成的字符串。

module.exports = {
  output: {
    filename: 'bundle.js'
  }
};

在上面的例子中，打包后的文件将被命名为 bundle.js。

2.2 `output.path`

output.path 用于指定打包后的文件的输出目录。它必须是一个绝对路径。

const path = require('path');

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

在上面的例子中，打包后的文件将被输出到 dist 目录下。

2.3 `output.publicPath`

output.publicPath 用于指定打包后的文件在浏览器中的公共路径。它通常用于配置 CDN 或者子路径。

module.exports = {
  output: {
    publicPath: 'https://cdn.example.com/assets/'
  }
};

在上面的例子中，打包后的文件在浏览器中的路径将变为 https://cdn.example.com/assets/bundle.js。

3. `output` 的高级配置

3.1 `output.chunkFilename`

output.chunkFilename 用于指定非入口 chunk 文件的名称。它通常用于配置异步加载的模块。

module.exports = {
  output: {
    chunkFilename: '[name].chunk.js'
  }
};

在上面的例子中，异步加载的模块将被命名为 [name].chunk.js。

3.2 `output.library`

output.library 用于指定打包后的库的名称。它通常用于将 Webpack 打包后的文件库来使用。

module.exports = {
  output: {
    library: 'MyLibrary'
  }
};

在上面的例子中，打包后的文件将名为 MyLibrary 的库来使用。

3.3 `output.libraryTarget`

output.libraryTarget 用于指定打包后的库的输出格式。它可以是 var、this、commonjs、commonjs2、amd、umd 等。

module.exports = {
  output: {
    libraryTarget: 'umd'
  }
};

在上面的例子中，打包后的文件将 UMD 模块来使用。

3.4 `output.globalObject`

output.globalObject 用于指定打包后的库的全局对象。它通常用于配置 Webpack 打包后的文件在浏览器中的全局对象。

module.exports = {
  output: {
    globalObject: 'this'
  }
};

在上面的例子中，打包后的文件将使用 this 作为全局对象。

3.5 `output.pathinfo`

output.pathinfo 用于指定是否在打包后的文件中包含模块路径信息。它通常用于调试。

module.exports = {
  output: {
    pathinfo: true
  }
};

在上面的例子中，打包后的文件将包含模块路径信息。

3.6 `output.sourceMapFilename`

output.sourceMapFilename 用于指定打包后的 source map 文件的名称。

module.exports = {
  output: {
    sourceMapFilename: '[file].map'
  }
};

在上面的例子中，打包后的 source map 文件将被命名为 [file].map。

3.7 `output.devtoolModuleFilenameTemplate`

output.devtoolModuleFilenameTemplate 用于指定 source map 文件中模块的文件名模板。

module.exports = {
  output: {
    devtoolModuleFilenameTemplate: 'webpack:///[resource-path]'
  }
};

在上面的例子中，source map 文件中模块的文件名将使用 webpack:///[resource-path] 作为模板。

3.8 `output.devtoolFallbackModuleFilenameTemplate`

output.devtoolFallbackModuleFilenameTemplate 用于指定 source map 文件中模块的文件名模板的备用模板。

module.exports = {
  output: {
    devtoolFallbackModuleFilenameTemplate: 'webpack:///[resource-path]?[hash]'
  }
};

在上面的例子中，source map 文件中模块的文件名将使用 webpack:///[resource-path]?[hash] 作为备用模板。

3.9 `output.devtoolNamespace`

output.devtoolNamespace 用于指定 source map 文件中模块的命名空间。

module.exports = {
  output: {
    devtoolNamespace: 'my-app'
  }
};

在上面的例子中，source map 文件中模块的命名空间将使用 my-app。

3.10 `output.umdNamedDefine`

output.umdNamedDefine 用于指定是否在 UMD 模块中使用命名定义。

module.exports = {
  output: {
    umdNamedDefine: true
  }
};

在上面的例子中，UMD 模块将使用命名定义。

3.11 `output.crossOriginLoading`

output.crossOriginLoading 用于指定是否启用跨域加载。

module.exports = {
  output: {
    crossOriginLoading: 'anonymous'
  }
};

在上面的例子中，打包后的文件将启用跨域加载，并且使用 anonymous 作为跨域加载的方式。

3.12 `output.jsonpFunction`

output.jsonpFunction 用于指定 JSONP 函数的名称。

module.exports = {
  output: {
    jsonpFunction: 'myJsonpFunction'
  }
};

在上面的例子中，JSONP 函数的名称将使用 myJsonpFunction。

3.13 `output.chunkLoadTimeout`

output.chunkLoadTimeout 用于指定 chunk 加载的超时时间。

module.exports = {
  output: {
    chunkLoadTimeout: 120000
  }
};

在上面的例子中，chunk 加载的超时时间将设置为 120000 毫秒。

3.14 `output.hotUpdateFunction`

output.hotUpdateFunction 用于指定热更新函数的名称。

module.exports = {
  output: {
    hotUpdateFunction: 'myHotUpdateFunction'
  }
};

在上面的例子中，热更新函数的名称将使用 myHotUpdateFunction。

3.15 `output.hotUpdateChunkFilename`

output.hotUpdateChunkFilename 用于指定热更新 chunk 文件的名称。

module.exports = {
  output: {
    hotUpdateChunkFilename: '[id].[hash].hot-update.js'
  }
};

在上面的例子中，热更新 chunk 文件将被命名为 [id].[hash].hot-update.js。

3.16 `output.hotUpdateMainFilename`

output.hotUpdateMainFilename 用于指定热更新主文件的名称。

module.exports = {
  output: {
    hotUpdateMainFilename: '[hash].hot-update.json'
  }
};

在上面的例子中，热更新主文件将被命名为 [hash].hot-update.json。

3.17 `output.sourcePrefix`

output.sourcePrefix 用于指定打包后的文件的前缀。

module.exports = {
  output: {
    sourcePrefix: '\t'
  }
};

在上面的例子中，打包后的文件将使用 \t 作为前缀。

3.18 `output.strictModuleExceptionHandling`

output.strictModuleExceptionHandling 用于指定是否启用严格的模块异常处理。

module.exports = {
  output: {
    strictModuleExceptionHandling: true
  }
};

在上面的例子中，将启用严格的模块异常处理。

3.19 `output.libraryExport`

output.libraryExport 用于指定库的导出方式。

module.exports = {
  output: {
    libraryExport: 'default'
  }
};

在上面的例子中，库将使用 default 作为导出方式。

3.20 `output.auxiliaryComment`

output.auxiliaryComment 用于指定辅助注释。

module.exports = {
  output: {
    auxiliaryComment: 'Comment for the library'
  }
};

在上面的例子中，打包后的文件将包含辅助注释 Comment for the library。

3.21 `output.hashFunction`

output.hashFunction 用于指定哈希函数。

module.exports = {
  output: {
    hashFunction: 'sha256'
  }
};

在上面的例子中，打包后的文件将使用 sha256 作为哈希函数。

3.22 `output.hashDigest`

output.hashDigest 用于指定哈希摘要的编码方式。

module.exports = {
  output: {
    hashDigest: 'hex'
  }
};

在上面的例子中，打包后的文件将使用 hex 作为哈希摘要的编码方式。

3.23 `output.hashDigestLength`

output.hashDigestLength 用于指定哈希摘要的长度。

module.exports = {
  output: {
    hashDigestLength: 20
  }
};

在上面的例子中，打包后的文件将使用长度为 20 的哈希摘要。

3.24 `output.hashSalt`

output.hashSalt 用于指定哈希盐。

module.exports = {
  output: {
    hashSalt: 'my-salt'
  }
};

在上面的例子中，打包后的文件将使用 my-salt 作为哈希盐。

3.25 `output.futureEmitAssets`

output.futureEmitAssets 用于指定是否启用未来的资源输出方式。

module.exports = {
  output: {
    futureEmitAssets: true
  }
};

在上面的例子中，将启用未来的资源输出方式。

3.26 `output.enabledLibraryTypes`

output.enabledLibraryTypes 用于指定启用的库类型。

module.exports = {
  output: {
    enabledLibraryTypes: ['var', 'module']
  }
};

在上面的例子中，将启用 var 和 module 类型的库。

3.27 `output.compareBeforeEmit`

output.compareBeforeEmit 用于指定在输出文件之前是否进行比较。

module.exports = {
  output: {
    compareBeforeEmit: true
  }
};

在上面的例子中，将在输出文件之前进行比较。

3.28 `output.trustedTypes`

output.trustedTypes 用于指定是否启用 Trusted Types。

module.exports = {
  output: {
    trustedTypes: true
  }
};

在上面的例子中，将启用 Trusted Types。

3.29 `output.uniqueName`

output.uniqueName 用于指定唯一的名称。

module.exports = {
  output: {
    uniqueName: 'my-unique-name'
  }
};

在上面的例子中，打包后的文件将使用 my-unique-name 作为唯一的名称。

3.30 `output.wasmLoading`

output.wasmLoading 用于指定 WebAssembly 模块的加载方式。

module.exports = {
  output: {
    wasmLoading: 'fetch'
  }
};

在上面的例子中，WebAssembly 模块将使用 fetch 作为加载方式。

3.31 `output.environment`

output.environment 用于指定打包后的文件的环境。

module.exports = {
  output: {
    environment: {
      arrowFunction: false,
      const: false,
      destructuring: false,
      forOf: false,
      dynamicImport: false,
      module: false
    }
  }
};

在上面的例子中，打包后的文件将禁用箭头函数、const、解构、for...of、动态导入和模块。

3.32 `output.module`

output.module 用于指定是否启用模块输出。

module.exports = {
  output: {
    module: true
  }
};

在上面的例子中，将启用模块输出。

3.33 `output.scriptType`

output.scriptType 用于指定脚本类型。

module.exports = {
  output: {
    scriptType: 'module'
  }
};

在上面的例子中，打包后的文件将使用 module 作为脚本类型。

3.34 `output.workerChunkLoading`

output.workerChunkLoading 用于指定 worker chunk 的加载方式。

module.exports = {
  output: {
    workerChunkLoading: 'import-scripts'
  }
};

在上面的例子中，worker chunk 将使用 import-scripts 作为加载方式。

3.35 `output.workerWasmLoading`

output.workerWasmLoading 用于指定 worker WebAssembly 模块的加载方式。

module.exports = {
  output: {
    workerWasmLoading: 'fetch'
  }
};

在上面的例子中，worker WebAssembly 模块将使用 fetch 作为加载方式。

3.36 `output.workerPublicPath`

output.workerPublicPath 用于指定 worker 的公共路径。

module.exports = {
  output: {
    workerPublicPath: '/workers/'
  }
};

在上面的例子中，worker 的公共路径将设置为 /workers/。

3.37 `output.globalObject`

output.globalObject 用于指定全局对象。

module.exports = {
  output: {
    globalObject: 'self'
  }
};

在上面的例子中，打包后的文件将使用 self 作为全局对象。

3.38 `output.importFunctionName`

output.importFunctionName 用于指定导入函数的名称。

module.exports = {
  output: {
    importFunctionName: 'myImportFunction'
  }
};

在上面的例子中，导入函数的名称将使用 myImportFunction。

3.39 `output.importMetaName`

output.importMetaName 用于指定 import.meta 的名称。

module.exports = {
  output: {
    importMetaName: 'myImportMeta'
  }
};

在上面的例子中，import.meta 的名称将使用 myImportMeta。

3.40 `output.chunkFormat`

output.chunkFormat 用于指定 chunk 的格式。

module.exports = {
  output: {
    chunkFormat: 'array-push'
  }
};

在上面的例子中，chunk 将使用 array-push 作为格式。

3.41 `output.chunkLoading`

output.chunkLoading 用于指定 chunk 的加载方式。

module.exports = {
  output: {
    chunkLoading: 'jsonp'
  }
};

在上面的例子中，chunk 将使用 jsonp 作为加载方式。