原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/concepts/output/
选项会影响编译的输出。Output的选项告诉webpack怎样把编译后的文件写入硬盘。注意，可能会有多个入口点，但是能有一个output配置。
如果使用hashing（[hash]或[chunkhash]），需要确保模块的顺序保持不变。可以用OccurrenceOrderPlugin或者recordsPath。
用法
Webpack配置文件里output属性的最低要求是给一个对象设定值。它包含两个东西：你想要的编译后的文件名（filename），和一个output.path，是一个绝对路径，放打包后文件的地方。
webpack.config.js
const config ={
output:{
filename:'bundle.js',
path:'/home/proj/public/assets'
}
};
module.exports = config;
选项
下面是可以传递给output属性的值得列表。
output.chunkFilename
非入口（non-entry）代码块的文件名，在output.path目录下的一个关联路径（/文件名）
- [id]将会被代码块的id替换
- [name]将会被代码块的名称替换（或者是当代码块没有名字的时候被id替换）
- [hash]被编译的哈希值替换
- [chunkhash]被代码块的哈希值替换
（译者注：配合实现异步加载，把需要异步加载的部分打包到一个独立的文件）
output.crossOriginLoading
允许跨域加载代码块的选项
- false – 不能跨域加载
- “anonymous” – 可以跨域加载。加载请求里不会传送证书。
- “use-credentials” – 可以跨域加载，且加载请求里将会传送证书。
output.devtoolLineToLine
使全部或者指定模块使用行到行（line-to-line）映射模式。Line-to-line映射模式使用了一个简单的SourceMap，每一行生成后的代码都被映射到源代码。这能优化性能。只有在性能上需要改善或者你确定输入行对应的生成行代码。
- true：适用于所有模块（不推荐）
一个类似于module.loaders的对象{test, include, exclude}，可以指定试用对象模块。
默认是false
output.filename
指定写入到磁盘的各个输出文件的名称。不能指定绝对路径！output.path选项决定了往磁盘里写文件的位置。filename仅被用于命名单个文件。
单个入口点：
{
entry:'./src/app.js',
output:{
filename:'bundle.js',
path: __dirname +'/build'
}
}
// writes to disk: ./build/bundle.js
多个入口点：
当你的配置创建了多个“块”（就像多个入口点或者使用CommonsChunkPlugin插件），应该使用替换来确保每个文件都有一个唯一的名字。
- [name] 将会被代码块名替换
- [hash]将会被编译的哈希值替换
- [chunkhash]将会被代码块的哈希值替换
{
entry:{
app:'./src/app.js',
search:'./src/search.js'
},
output:{
filename:'[name].js',
path: __dirname +'/build'
}
}
// writes to disk: ./build/app.js, ./build/search.js
output.hotUpdateChunkFilename
定义热更新（Hot Update）代码块的文件名。它们被放在output.path目录里。
- [id]将会被代码块的id替换
- [hash]将会被编译的哈希值替换（记录里保存的最后一个哈希值）
默认是：”[id].[hash].hot-update.js”
output.hotUpdateFunction
一个JSONP函数，在webpack里被用于对热更新（hot update）代码块的异步加载。
默认：”webpackHotUpdate”
output.hotUpdateMainFilename
热更新（Hot Update）的主文件名。它们被放在output.path目录里。
- [hash]：将被编译的哈希值替换（记录里保存的最后一个哈希值）
默认：”[hash].out-update.json”
output.jsonpFunction
一个JSONP函数，在webpack里被用于代码块的异步加载。
函数简短一点，相对应文件的大小也会小一点。在一个单页应用里有多个webpack实例的时候，需要有不同的标识符。
默认：”webpackJsonp”
output.library
如果被设定，输出的包就是库。output.library是它的名字。
如果你正在写一个库，并且想以单独文件发布的时候使用它。
output.libraryTarget
定义输出库的格式
- “var” – 通过设定一个变量导出：var Library = XXX（默认）
- “this” – 通过设定this属性导出：this:this[“Library”] = xxx
- “commonjs” – 通过设定exports属性导出：exports: exportsp[“Library”] = xxx
- “commonjs2” – 通过设定module.exports导出：module.exports = xxx
- “amd” – 导出到AMD（随意命名– 通过库的选项设定名字）
- “umd” – 导出到AMD，CommonJS2或者作为根的一个属性
默认：”var”
如果output.library没有设定，output.libraryTarget被设定为var以外的值，每一个导出属性都会被拷贝（除了amd，commonjs2和umd）。
output.path
输出的目录，是绝对路径（必须）
- [hash]将会被编译的哈希值替换
config.js
output:{
path:"/home/proj/public/assets",
publicPath:"/assets/"
}
index.html
<head> <link href="/assets/spinner.gif"/> </head>
使用CDN和为资源设定哈希值的另一个例子：
config.js
output:{
path:"/home/proj/cdn/assets/[hash]",
publicPath:"http://cdn.example.com/assets/[hash]/"
}
注意：有时候，在编译期间，当输出文件的publicPath不知道的时候，它会被留空白，并且在运行时在入口点文件里被动态设定。当你在编译时不知道publicPath时，可以先忽略它，在入口点设定__webpack_public_path__
__webpack_public_path__ = myRuntimePublicPath // rest of your application entry
output.sourceMapFilename
为Javascript文件而生成的SourceMaps的文件名。它们被放在output.path目录里。
- [file]将会被JavaScript文件名替换
- [id]将会被代码块的id替换
- [hash]将会被编译的哈希值替换
默认：”[file].map”
-- End --
相关推荐
Webpack 是一个流行的前端构建工具，它能将各种前端资源（如JS、CSS、图片等）打包成静态资源，以便在浏览器中高效运行。Webpack4是Webpack的最新稳定版本，提供了许多改进和新特性，而Webpack4中文手册则是针对此...
Webpack的核心概念包括入口(entry)、输出(output)、模块加载器(loaders)和插件(plugins)。在“神庙逃亡”的开发中，Webpack可能被用来处理Vue组件、JavaScript代码、样式文件和静态资源。例如，使用Babel loader将...
根据给定文件的信息，本文将围绕Webpack 3的深入解析及其与...虽然本文档提到的是2018年的Webpack 3版本，但其中介绍的基本概念和技术仍然具有很高的参考价值，对于理解和学习Webpack 4及更高版本也有很好的铺垫作用。
### webpack 官方中文文档知识点总结 #### 一、webpack简介 webpack是一个现代JavaScript应用程序的静态模块打包工具。它的核心功能在于构建一个依赖图(dependency graph)，该图映射出项目所需的所有模块，并最终...
Webpack的核心概念包括入口(entry)、输出(output)、加载器(loaders)和插件(plugins)，其中插件用于扩展Webpack的功能，如jsdoc-webpack-plugin正是这样的一个插件。 **jsdoc-webpack-plugin** 是Webpack生态中的一...
### Webpack2 中文文档概览 #### Webpack 概述 Webpack 是一款现代前端项目的模块打包工具。它能够将项目中的多个独立模块按照依赖关系和规则打包成适合生产环境部署的静态资源，并且支持按需加载的代码分割功能。...
Webpack 是一个流行的模块打包工具，尤其在前端开发中被广泛使用。这个"webpackdemo只打包js、css"的项目是一个基础示例，演示了如何使用...对于更复杂的场景，建议查阅Webpack的官方文档以获取详细信息和最佳实践。
3. **配置Webpack**：编写`webpack.config.js`文件，定义入口文件、输出路径、Loader等。 4. **构建项目**：运行`npm run build`命令来构建项目。 5. **部署项目**：将构建好的文件部署到服务器或其他环境中。 通过...
3. **package-lock.json** 和 **package.json** - 这两个文件是Node.js项目的核心配置。`package.json`用于记录项目依赖、脚本命令等信息，而`package-lock.json`记录了每个依赖的确切版本，确保团队成员和构建环境...
例如，在Webpack或Gulp这样的构建工具中，可以添加插件来生成报告。 总的来说，"前端开源库-html-reporter.zip" 提供了一个工具，可以帮助前端开发者更好地管理和理解他们的项目，通过生成详细的HTML报告，提升团队...
这个压缩包可能是某个开源项目、电商网站或者任何Web应用的前端代码库。 首先，让我们探讨一下前端开发的基本概念。前端开发通常涉及HTML、CSS和JavaScript这三种核心技术。HTML（HyperText Markup Language）用于...
我们可以在tsconfig.json文件中配置编译器的选项，例如，输出文件的目录、编译器的目标版本等。 6. _TypeScript与React、Vue、Webpack的集成_ TypeScript可以与多种框架和库集成，例如React、Vue、Webpack等。在...
Webpack 是一款强大的模块打包工具，尤其在现代前端开发中扮演着至关重要的角色。它将JavaScript应用中的各种资源（包括JS、CSS、...在学习过程中，参考官方文档、在线教程和社区问答都能帮助你更好地理解和解决问题。
- **使用社区资源**：查阅Webpack文档、Stack Overflow、GitHub上的Issue等获取解决方案。 4. **Webpack工作流程**： - 分析入口点，找出所有依赖。 - 使用加载器处理不同类型的模块，如Babel处理ES6+语法。 - ...
在深入源码之前，我们需要理解源码的基本结构和可能涉及的关键概念。源代码是程序员用编程语言书写的指令集合，它定义了程序的行为和逻辑。对于"anni-fetch"，我们可能会找到以下几个部分： 1. **主文件（Main File...
Webpack 的核心概念包括： 1. **入口（Entry）**：定义了应用的起点，Webpack 从这里开始构建模块图。 2. **输出（Output）**：指定打包后的文件路径和命名规则。 3. **加载器（Loaders）**：用于转换不同类型的模块...
在这个项目中，我们可以探讨关于 Webpack 的核心概念、jQuery 的使用以及可能的自定义组件构建。 首先，Webpack 的核心概念包括： 1. **入口(entry)**：定义项目的起点，Webpack 从这个入口文件开始遍历依赖图，找...
这个压缩包"webpack-doc, 个人业余 webpack 1.x 文档翻译（非官方）（未完成）.zip"包含了一个个人爱好者对Webpack 1.x版本的非官方文档翻译项目，尽管未完成，但依然能为学习和理解Webpack提供一些帮助。...
3. `webpack.config.js`：Webpack的配置文件，定义了模块加载规则、输出设置等。 4. `package.json`：项目元数据文件，记录了依赖项、脚本命令等信息。 5. `.gitignore`：定义了Git应忽略的文件和目录。 6. `README....
3. **Webpack的主要概念** - **Entry**：入口，定义了应用的起点，Webpack从这个点开始解析依赖并构建输出。 - **Output**：输出，指定Webpack编译后文件的存放位置和文件名。 - **Loaders**：加载器，用于转换...