output

admin 管理员组

文章数量: 888150

output

output

文章目录

• • • • • output
        • • assetModuleFilename(module的名字)
          • asyncChunks(异步chunk)
          • auxiliaryComment(给library的库导出插入注释)
          • charset（script标签添加charset标识）
          • chunkFilename（设置打包出来的chunk的名字）
          • chunkFormat（chunk的格式）
          • chunkLoadTimeout（chunk请求延迟）
          • chunkLoadingGlobal（加载chunk全局变量）
          • chunkLoading（加载chunk的方法）
          • clean（输出清理）
          • compareBeforeEmit
          • corssOriginLoading（corss-origin加载chunk）
          • devtoolFallbackModuleFilenameTemplate
          • devtoolModuleFilenameTemplate
          • devtoolNamespace
          • enabledChunkLoadingTypes
          • enabledLibraryTypes
          • enabledWasmLoadingTypes
          • filename（输出的bundle名称）
          • globalObject（全局对象）
          • hashDigest（hash编码格式）
          • hashDigestLength（hash长度）
          • hashFunction
          • hashSalt
          • hotUpdateChunkFilename（热更新chunk的文件名字）
          • hotUpdateGlobal
          • hotUpdateMainFilename
          • iife（添加iife）
          • importFunctionName(import`s name)
          • library（chunk）
          • library.export
          • library.auxiliaryComment
          • output.library.umdNamedDefine
          • module（模块输出js文件）
          • path（输出绝对路径）
          • pathinfo
          • publicPath（公开url路径）
          • scriptType
          • sourceMapFilename
          • sourcePrefix
          • strictModuleErrorHandling
          • strictModuleExceptionHandling
          • trustedTypes
          • umdNamedDefine
          • wasmLoading
          • workerChunkLoading
          • sourceMapFilename
          • sourcePrefix
          • strictModuleErrorHandling
          • strictModuleExceptionHandling
          • trustedTypes
          • umdNamedDefine
          • wasmLoading
          • workerChunkLoading

assetModuleFilename(module的名字)

跟 output.filename相同，不过应用于Asset Modules,

asyncChunks(异步chunk)

boolean

创建按需加载的异步chunk

module.exports = {//.....output: {asyncChunks: true}
}

auxiliaryComment(给library的库导出插入注释)

和 output.library 和 output.libraryTarget一起使用，允许用户对导出的容器中插入注释

module.exports = {//.....output: {library: 'lib',libraryTarget: 'umd',filename: '[name].js',auxiliaryComment: 'test Comment'}
}

传入一个对象可以对 libraryTarget各种类型添加不同的注释便于区分

module.exports = {//....output: {library: 'lib',libraryTarget: 'umd',filename: '[name].js',auxiliaryComment: {root: 'Root Comment',commonjs: 'Commonjs Comment',commonjs2: 'Commonjs2 Comment',amd: 'AMD Comment'}}
}

charset（script标签添加charset标识）

boolean

告诉浏览器给script标签添加 charset="utf-8"标识。

chunkFilename（设置打包出来的chunk的名字）

string = '[id].js' function(pathData, assetInfo) => string

决定了非初始chunk文件的名称.

chunkFilename指的是未被列在 entry 里面，却又需要被打包出来的 chunk文件的名称。

比如我们在业务代码中懒加载 lodash

const btn = document.createElement('button');
btn.innerHTML = 'click me';
async function getComment() {const element = document.createElement('div');const { default: _ } = await import('lodash');element.innerHTML = _.join(['hello', 'lodash'], ' ');return element
}btn.addEventListener('click', () => {getComment().then(comment => {document.body.appendChild(comment)})
})

在 webpack.config.js里面

module.exports = {entry: {index: './src/index.js'},output: {filename: '[name].min.js'}
}

可以看到打包之后输出了两个文件，index.min.js和 323.min.js.

而323.min.js就是异步加载的chunk文件。

如果我没没用设置 chunkFilename的话则默认使用 [id].js

如果我们设置了 chunkFilename的话

module.exports = {entry: {index: './src/index.js'},output: {filename: '[name].js',chunkFilename: 'bundle.js'}
}

还可以以函数的形式

module.exports = {entry: {index: './src/index.js'},output: {filename: '[name].js',chunkFilename: (pathData) => {return pathData.chunk.name === 'main' ? '[name].js' : '[name]/[name].js';}}
}

chunkFormat（chunk的格式）

chunk的格式

module.exports = {output: {chunkFormatL 'commonjs'}
}

chunkLoadTimeout（chunk请求延迟）

chunk请求到期之前的毫秒数，默认为120000；

module.exports = {output: {chunkLoadTimeout: 30000}
}

chunkLoadingGlobal（加载chunk全局变量）

webpack用于加载chunk的全局变量

module.exports = {output: {chunkLoadingGlobal: 'myCustomFunc'}
}

chunkLoading（加载chunk的方法）

加载chunk的方法

官网解释：加载 chunk 的方法（默认值有 'jsonp' (web)、'import' (ESM)、'importScripts' (WebWorker)、'require' (sync node.js)、'async-node' (async node.js)，还有其他值可由插件添加)。

clean（输出清理）

module.exports = {output: {clean: true //在文件生成之前清空output目录}
}

module.exports = {output: {clean: {dry: true //打印而不是删除应该移出的静态资源}}
}

module.exports = {output: {clean: {keep: /ignored\/dir\// //保留 'ignored/dir' 下的静态资源}}
}或者
module.exports = {//...output: {clean: {keep(asset) {return asset.includes('ignored/dir');},},},
};

或者钩子函数的形式

webpack.CleanPlugin.getCompilationHooks(compilation).keep.tap('Test',(asset) => {if (/ignored\/dir\//.test(asset)) return true;}
)

compareBeforeEmit

boolean

查看写入到文件输出系统时检查是否已经存在相同的文件。如果有的话webpack将不会输出文件。

module.exports = {//....output: {compareBeforeEmit: false}
}

corssOriginLoading（corss-origin加载chunk）

告诉webpack启用corss-origin属性加载chunk，仅在target设置为 web的时候生效，通过使用JSONP来添加脚本标签。

devtoolFallbackModuleFilenameTemplate

当上面的模板字符串或者函数产生重复的时候使用的备份内容。

devtoolModuleFilenameTemplate

此选项只有在 [devtool]使用了需要模块名称的选项的时候使用

自定义每个source map的 sourece数组使用的名称，详情见官网

[]:

devtoolNamespace

此选项确定 output.devtoolModuleFilenameTemplate 使用的模块名称空间。未指定时的默认值为：output.library。在加载多个通过 webpack 构建的 library 时，用于防止 source map 中源文件路径冲突。

enabledChunkLoadingTypes

允许入口点使用的chunk加载类型资源。

module.exports = {//.....output: {enabledChunkLoadingTypes: ['jsonp', 'require']}
}

enabledLibraryTypes

入口点可用的library类型列表。

module.exports = {//....output: {enabledLibraryTypes: ['module']}
}

enabledWasmLoadingTypes

用于设置入口支持的wasm加载类型的列表。

filename（输出的bundle名称）

控制输出的bundle的名称。

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

使用内部名称, [name]会拿到 entrt的 index1的属性名称，也就是打包出的名字为 index1.min.js

module.exports = {entry: {index1: './src/index.js'},output: {filename: '[name].min.js'}
}

使用内部的chunkid

module.exports = {//....output: {filename: '[id].min.js'}
}

使用生成内容产生的hash

module.exports = {//......output: {filename: '[contenthash].js'}
}

组合使用

module.exports = {//....output: {filename: '[name].[contenthash].js'}
}

或者函数返回

module.exports = {//.....output: {filename: (pathData) => {return pathData.chunk.name === 'main' ? '[name].js' : '[name]/[name].js';}}
}

可在 chunk 层面进行替换的内容：

模板	描述
[id]	此 chunk 的 ID
[name]	如果设置，则为此 chunk 的名称，否则使用 chunk 的 ID
[chunkhash]	此 chunk 的 hash 值，包含该 chunk 的所有元素
[contenthash]	此 chunk 的 hash 值，只包括该内容类型的元素（受 optimization.realContentHash 影响）

可在编译层面进行替换得内容：

模板	描述
[fullhash]	compilation完整的hash值
[hash]	和上面一样但是已被废弃

在模块层面替换：

模板	描述
[id]	chunk的id
[moduleid]	已经弃用
[hash]	chunk的hash值
[modulehash]	已经弃用
[contenthash]	模块中的Hash值

globalObject（全局对象）

string = 'window'

当输出为library的时候，当libraryTarget为umd的时候，控制由谁来挂载library，让UMD在浏览器和nodejs上面都可以用，要把选项设置为 'this'

module.exports = {//....output: {library: 'myLib',libraryTarget: 'umd',filename: '[name].min.js',globalObject: 'this'}
}

hashDigest（hash编码格式）

生成hash的时候使用的编码格式

hashDigestLength（hash长度）

用于设置hash值得长度，默认为20。

hashFunction

引入文件的具体算法，默认为 md5。

见官网

hashSalt

给 hash 加盐，很少用.

hotUpdateChunkFilename（热更新chunk的文件名字）

自定义热更新chunk得文件名，

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

hotUpdateGlobal

只在 target 设置为 'web' 时使用，用于加载热更新(hot update)的 JSONP 函数。

JSONP 函数用于异步加载(async load)热更新(hot-update) chunk。

欲了解详情，请查阅 output.chunkLoadingGlobal。

hotUpdateMainFilename

自定义热更新得主文件名称（main filename)

基本用不到，不用修改

iife（添加iife）

告诉webpack添加IIFE自执行函数外层包裹生成的代码

module.exports = {entry: {index: './src/index.js'},output: {iife: true}
}

区别就是打包出来的代码是否外层有包裹IIFE，包裹的好处是防止全局命名污染。

importFunctionName(import`s name)

string = 'import'

内部 import()函数的名称

module.exports = {//....output: {//.....importFunctionName: 'import'}
}

library（chunk）

输出一个库，为入口做导出

webpackconfig

module.exports = {entry: {index: './src/index.js'},output: {filename: '[name].min.js',library: 'Mylib',libraryTarget: 'umd',}
}

index.js

export function hello(name) {console.log(name)
}

打包之后可以在script标签里面引入

<script src="./index.min.js"></script>
<script>Mylib.hello('123'); //123
</script>

如果我们有多个文件输出

webpack.config.js

module.exports = {entry: {index: './src/index.js',index2: './src/index2.js'},output: {filename: '[name].min.js',library: ['mylib', '[name]']}
}

打包之后可以在script标签下

<script src="./index.min.js"></script>
<script src="./index2.min.js"></script>
<script>mylib.index.hello('123');mylib.index2.hello('123')
</script>

也可以在入口处进行配置

module.exports = {entry: {index: {import: './src/index.js',library: {name: 'mylib',type: 'umd'}}}
}

属性	描述
auxiliaryComment	给umd类型添加相同的注释，可以细化给不同的类型
name	library的名称
type	配置暴露库的方式
export	指定那个导出应该暴露为一个库
umdNamedDefine	将会把 AMD 模块命名为 UMD 构建。否则使用匿名 define。

library.export

指定哪一个导出暴露为一个库

module.exports = {entry: {index: './src/index.js'},output: {library: {name: 'mylib',type: 'umd',export: 'default'},name: '[name].min.js',}
}

入口起点的默认导出会被赋值为库的名称。

var mylib = _entry_return_.default

也可以传递数组，会被解析为路径

module.epxorts = {output: {library: {name: 'mylib',type: 'umd',export: ['default', 'sun']}}
}

var mylib = _entry_return_.default.sun

library.auxiliaryComment

给每个 umd类型插上相同的注释

module.exports = {entry: {index: './src/index,js'},output: {library: 'test',libraryTarget: 'umd',auxiliaryComment: 'test Comment'}
}

output.library.umdNamedDefine

官网注释：

当使用 output.library.type: "umd" 时，将 output.library.umdNamedDefine 设置为 true 将会把 AMD 模块命名为 UMD 构建。否则使用匿名 define

module.exports = {//...output: {library: {name: 'MyLibrary',type: 'umd',umdNamedDefine: true,},},
};

AMD module 将会是这样

define('MyLibrary', [], factory);

module（模块输出js文件）

以模块类型输出js文件，实验阶段暂时禁用；

path（输出绝对路径）

string

输出一个绝对路径

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

pathinfo

boolean

官网注释：

告知 webpack 在 bundle 中引入「所包含模块信息」的相关注释。此选项在 development 模式时的默认值为 true，而在 production 模式时的默认值为 false。当值为 'verbose' 时，会显示更多信息，如 export，运行时依赖以及 bailouts。

module.exports = {//...output: {pathinfo: true,},
};
Ti

publicPath（公开url路径）

function

string

在浏览器中所使用的公开url，

实例：

module.exports = {entry: {index: './src/index.js'},output: {publicPath: '/assets/'}
}

那么在浏览器中得访问某个chunk请求得时候就是/assets/chunk.js

又比如说我们在使用webpack-dev-server可以使用到。

scriptType

这个配置项允许使用自定义 script 类型加载异步 chunk，例如 <script type="module" ...>

sourceMapFilename

仅在 devtool 设置为 'source-map' 时有效，此选项会向硬盘写入一个输出文件。

sourcePrefix

修改输出 bundle 中每行的前缀。

strictModuleErrorHandling

按照 ES Module 规范处理 module 加载时的错误，会有性能损失。

strictModuleExceptionHandling

已废弃

trustedTypes

控制 Trusted Types 兼容性。

umdNamedDefine

当我们的libraryTarget设置为umd的时候，umdNamedDefine为true的时候可以命名由UMD构建的AMD模块，否则默认为一个匿名的define

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

wasmLoading

此选项用于设置加载 WebAssembly 模块的方式

workerChunkLoading

这个配置项允许使用自定义 script 类型加载异步 chunk，例如 <script type="module" ...>

sourceMapFilename

仅在 devtool 设置为 'source-map' 时有效，此选项会向硬盘写入一个输出文件。

sourcePrefix

修改输出 bundle 中每行的前缀。

strictModuleErrorHandling

按照 ES Module 规范处理 module 加载时的错误，会有性能损失。

strictModuleExceptionHandling

已废弃

trustedTypes

控制 Trusted Types 兼容性。

umdNamedDefine

当我们的libraryTarget设置为umd的时候，umdNamedDefine为true的时候可以命名由UMD构建的AMD模块，否则默认为一个匿名的define

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

wasmLoading

此选项用于设置加载 WebAssembly 模块的方式

workerChunkLoading

新选项 workerChunkLoading 用于控制 workder 的 chunk 加载。

本文标签： output