output

output

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数组使用的名称，详情见官网

[https://webpack.docschina.org/configuration/output/#outputcrossoriginloading]:

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。

见官网https://webpack.docschina.org/configuration/output/#outputcrossoriginloading

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 加载。