作为前端工程化的重要一环，Webpack 在打包处理模块、资源等方面表现出了强大的能力。其中，output 这个配置选项负责将打包好的模块输出到指定的目录中，而本文将对其进行详细的讲解。
output 的概念
output 的作用是告诉 Webpack 打包后的文件输出到哪个目录下以及如何命名。在一个 Webpack 配置文件中，output 是一个对象，其中包含了以下属性：
path：用于指定输出路径，通常是一个绝对路径。filename：用于指定打包后的文件名格式，默认为bundle.js。publicPath：用于指定加载这些资源的 base URL。
下面是一个 output 配置的示例：
output: {
path: __dirname + '/dist',
filename: 'bundle.js',
publicPath: '/'
}path
path 属性指定了打包后的文件输出的目录路径，通常是一个绝对路径。在使用 Webpack 打包时，会将项目中的文件全部打包为一个文件，所以必须指定输出路径。
例如：
output: {
path: __dirname + '/dist', // 输出到 dist 目录下
}filename
filename 属性用于指定打包后的文件名格式，默认为 bundle.js。
可以在名称中包含模板，并使用 [name]、[hash] 和 [chunkhash] 等占位符来生成文件名。其中，[name] 会根据模块名称生成文件名，[hash] 会生成一个唯一的 Hash 标识符，用于防止浏览器端缓存，[chunkhash] 会根据模块内容生成文件名。
例如：
output: {
filename: '[name].[hash].js', // 输出为 name.8776f5208306e9fe6f48.js
}publicPath
publicPath 属性用于指定在浏览器中加载资源的 base URL。
在 Webpack 中，资源加载路径不仅仅依赖于造成这些资源的 entry 文件（比如 index.html），还依赖于配置选项 output.publicPath。如果 publicPath 被配置了，所有引用的资源都会被打包成一个完整的 URL，而不是一个相对地址，默认情况下，publicPath 的值是空字符串，表示使用相对路径。
例如：
output: {
publicPath: 'http://cdn.example.com/assets'
}当 Webpack 打包的时候，会将资源的路径生成为 http://cdn.example.com/assets/bundle.js
总结
output 配置选项是 Webpack 打包的核心配置之一，指定了打包后的文件输出路径、文件名等属性。在应用中熟练掌握 output 的配置将有助于提高开发效率，同时还可以减少请求次数，加快网页下载速度。
不仅如此，output 还可以通过配置占位符生成动态的文件名，能够自动生成文件名，并且保证了文件名的唯一性。同时，使用 publicPath 属性，还能够将资源部署到 CDN 上，采用相对路径来进行访问，提高网站访问速度。
参考代码
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- --------------------------
----------- ---
--
------- -
------ -
-
----- ----------
---- ------------
-------- --------------
-
-
--
-------- -
----------- -------- ------ ------
-
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649eb97748841e9894b43e16