出口(Output)

output选项影响编译输出。output选项控制 webpack 如何向硬盘写入编译文件。注意,即使可以存在多个入口点,但只指定一个输出配置。

如果你用了哈希([hash][chunkhash]),请确保模块具有一致的顺序。可以使用 OccurrenceOrderPluginrecordsPath

用法

webpack配置中的output属性的最低要求是将其设置为一个对象,包括以下两点:

你编译出来文件名随你命名,但是我们通常使用 : main.js 或者 bundle.js 或者 index.js

一个 output.path必须是一个 绝对路径 ,该路径指向你想打包到的目录。

webpack.config.js

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

module.exports = config;

选项

以下列出可以向 output 属性传入的值。

output.chunkFilename

非入口块的文件名,作为 output.path 目录中的相对路径。

[id] 被 chunk 的 id 替换。

[name] 被 chunk 的 name 替换(或者当 chunk 没有 name 时使用 id 替换)。

[hash] 被编译的 hash 替换。

[chunkhash] 被 chunk 的 hash 替换。

output.crossOriginLoading

选项启用跨域加载(cross-origin loading) chunk。

可能的值有:
false - 禁用跨域加载
anonymous - 启用跨域加载。当使用 anonymous
时,发送请求不带凭据(credential)。
use-credentials - 启用跨域加载。发送请求带凭据(credential)。
更多跨域加载信息请查看MDN

默认值:false

参考library
参考Development Tools

output.devtoolLineToLine

所有/指定模块启用行到行映射模式。行到行映射模式使用一个简单的 SourceMap,其中生成源码的每一行都映射到原始源码的同一行。这是一个可以性能优化的地方。当你需要更好的性能,并且要确保输入行和生成行匹配时,才会考虑启用。

true 在所有模块启用(不推荐)

{test, include, exclude}对象 在特定文件启用(类似于 module.loaders)。

默认值:disabled

output.filename

指定硬盘每个输出文件的名称。在这里你不能指定绝对路径!·output.path· 选项规定了文件被写入硬盘的位置。·filename· 仅用于命名每个文件。

单入口

{
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/build'
  }
}

// writes to disk: ./build/bundle.js

多入口

如果你的配置创建了多个 "chunk"(例如使用多个入口点或使用类似 CommonsChunkPlugin 的插件),你应该使用以下的替换方式来确保每个文件名都不重复。

[name] 被 chunk 的 name 替换。

[hash] 被编译(compilation)的 hash 替换。

[chunkhash]被 chunk 的 hash 替换。

{
  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

热更新块 的文件名。它们在output.path目录中。

[id] 被 chunk 的 id 替换。

[hash] 被编译的 hash 替换。(最后一个 hash 存储在记录中)

默认值: "[id].[hash].hot-update.js"

output.hotUpdateFunction

webpack 用于异步加载热更新块的 JSONP 函数。

默认值: "webpackHotUpdate"

output.hotUpdateMainFilename

热更新主文件的文件名。

[hash] 被编译的 hash 替换。(最后一个 hash 存储在记录中)

默认值: "[hash].hot-update.json"

output.jsonpFunction

webpack 用于异步加载块(chunk)的 JSONP 函数。

较短的函数可能会减少文件大小。当单页有多个 webpack 实例时,请使用不同的标识符。

默认值: "webpackJsonp"

output.library

如果设置过,可将包导出为库。output.library 是库的名称。

如果你正在编写库并且想要将其发布为一个单文件,请使用此选项。

output.libraryTarget

导出库的格式

"var" - 通过设置一个变量导出:var Library = xxx(默认)

"this" - 通过设置this的一个属性导出:this["Library"] = xxx

"commonjs" - 通过设置exports的一个属性导出:exports["Library"] = xxx

"commonjs2" - 通过设置module.exportsmodule.exports = xxx

"amd" - 导出到 AMD(可选命名 - 通过 library 选项设置名称)

"umd" - 导出到 AMD,CommonJS2 或者 root 的一个属性

默认值: "var"

如果 output.library 未设置,但是 output.libraryTarget 被设置为var以外的值,则导出对象的每个属性都被复制(除了 amdcommonjs2umd)。

output.path

绝对路径作为导出目录(必选项)。

[hash] 被编译的 hash 替换。

config.js

output: {
    path: "/home/proj/public/assets",
    publicPath: "/assets/"
}

index.html

<head>
  <link href="/assets/spinner.gif"/>
</head>

接下来是一个更复杂的例子,来说明对资源使用 CDN 和 hash。

config.js

output: {
    path: "/home/proj/cdn/assets/[hash]",
    publicPath: "http://cdn.example.com/assets/[hash]/"
}

注意: 在编译时不知道最终输出文件的publicPath的情况下,publicPath可以留空,并且在入口点文件运行时动态设置。如果你在编译时不知道publicPath,你可以先忽略它,并且在入口点设置 __webpack_public_path__

 __webpack_public_path__ = myRuntimePublicPath

// 其他的应用程序入口

output.sourceMapFilename

JavaScript 文件 SourceMap 的文件名。它们在output.path目录中。

[file] 被 JavaScript 文件的文件名替换。

[id] 被 chunk 的 id 替换。

[hash] 被编译(compilation)的 hash 替换。

默认值: "[file].map"

下一篇:加载器

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350

推荐阅读更多精彩内容

  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,681评论 7 110
  • publicPath指定了一个在浏览器中被引用的URL地址。 对于使用 和 加载器,当文件路径不同于他们的本地磁盘...
    飞呀飞哥阅读 1,695评论 0 0
  • 原文地址:https://webpack.js.org/concepts/output/翻译:xiyoki Out...
    前端xiyoki阅读 881评论 0 0
  • 前言 webpack2和vue2已经不是新鲜东西了,满大街的文章在讲解webpack和vue,但是很多内容写的不是...
    技术宅小青年阅读 6,524评论 4 43
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,637评论 18 139