webpack核心概念之输出「Output」

1.概述

在webpack中，输出（output）是指将经过处理的文件发送到磁盘的过程，通常被称为“打包”。输出通常是使用输出插件（output plugin）完成的。该插件定义了webpack如何将编译后的文件写入磁盘。webpack支持将输出文件打包到文件系统、内存，也可以自定义输出方式。

2.输出文件命名规则

webpack的输出文件名称和文件路径可以使用许多占位符（placeholder）来动态生成，如下表：

可以在webpack配置中使用output.filename属性来设置输出文件名，如下：

module.exports = {
  output: {
    filename: 'bundle-[hash].js'
  }
}

以上配置会把生成的文件命名为bundle和一个带有哈希值的.js文件。

2.1 filename中的hash

webpack提供了三种类型的哈希：

hash - 整个项目的hash

chunkhash - 特定的chunk文件hash

contenthash - 特定文件内容hash

简单来说，hash和chunkhash都是算法生成的哈希值。contenthash，是文件内容的哈希。

3.输出文件路径

output.path属性用于设置输出文件所在的目录，如下：

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

将会把文件打包到项目中的build文件夹中。

4. output.publicPath

output.publicPath配置项和output.path有一点不同。它在处理静态文件时起作用。publicPath告诉webpack服务器，静态资源的URL路径前缀。通常用于被CDN处理的文件。

如果设置了publicPath，打包后的文件不会直接打包到output.path中，在代码中，webpack会自动生成URL，基于publicPath和webpack的“构建时依赖图形（build dependency graph）”在内存中处理文件。比如：

module.exports = {
  output: {
    filename: 'bundle-[hash].js',
    publicPath: '/'
  }
}

以上配置告诉webpack生成路径的根目录是根URL（/），并且用哈希值表示应用程序的名称（bundle-[hash].js）。在构建过程中，webpack会把原始文件和所有生成的文件都作为依赖项处理，从而构建哈希映射表。

5.输出文件的类型

5.1. Library

将你的 library 暴露为一个变量

module.exports = {
  output: {
    library: 'MyLibrary',
    libraryTarget: 'umd'
  }
}

Bundle 的输出被暴露为一个名为 MyLibrary 的全局变量。

5.2. LibraryTarget

以指定的形式导出你的 library

module.exports = {
  output: {
    library: 'MyLibrary',
    libraryTarget: 'commonjs'
  }
}

生成的 bundle 的输出将被作为一个 commonjs 模块。

5.3. 异步输出作为 JSONP(CommonJS/AMD/CJS module systems)

output.filename 用 [name].bundle.js 模板生成了 3 个文件，每个文件都被封装在了一个函数末尾的小块（类似 CommonJS 或 AMD loader）内。这是通过 JSONP 运行时实现的。

(function (modules) { /* webpack bootstrap */ })(/* webpack runtime code */);

其中，函数的参数列表 modules 是一个对象，包含了剩余模块的加载函数。这个函数列表在 webpack 加载完毕并实例化之后被调用。每个模块的代码在执行时传入 require / module / exports 对象以进行模块化作用域包裹处理。

总结

输出是webpack的一个重要概念，webpack支持将输出文件打包到文件系统、内存，也可以自定义输出方式。我们在webpack中输出文件命名、输出文件路径、publicPath、输出文件的类型都可以进行定制。