博客

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 层面进行替换的内容：

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

在模块层面替换：

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'
            }
        }
    }
}

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