webpack--Output

Posted 2021-01-14 Milk.╮

Output

output配置如何输出最终想要的代码，output是一个object里面包含一系列配置。

1. filename

output.filename配置输出文件的名称，为string类型，如果只有一个输出文件，我们可以将它写为静态不变的：

filename: ‘bundel.js‘

现在有多个chunk要输出时，就需要借助模板和变量了，前面说到webpack会为每个chunk取一个名称，可以根据chunk名称来区分输出的文件名：

filename: ‘[name].js‘

代码里的[name]代表用内置的name变量去替换[name]，这时你可以把它看做一个字符串模板函数，每个要输出的chunk都会通过这个函数去拼接出输出的文件名称。

内置变量还有如下：

1. id, chunk的唯一标识，从0开始。
2. name, chunk的名称。
3. hash, chunk的唯一标识的hash值。
4. chunkhash, chunk内容的hash值。

其中hash和chunkhash的长度可以指定的，[hash:8]这样去指定，默认是20位。

2. chunkFilename

output.chunkFilename, 配置无入口的chunk在输出时的文件名称。chunkFilename和filename非常类似，但是chunkFilename只用于指定在运行过程中生成的chunk在输出的时的文件名称。常见的会在运行时生成chunk场景只有在使用CommonChunkPlugin，使用import(‘path/to/module‘)动态加载等时，chunkFilename支持和filename一致的内置变量。

3. path

output.path配置输出文件存放在本地的目录，必须是string类型的绝对路径

path: path.resolve(__dirname, ‘dist_[hash]‘)

4. publicPath

在项目中可能会有一些构建出的资源需要异步加载，加载这些异步资源需要对应的URL地址。
output.publicPath配置发布到线上资源的URL前缀，为string类型，默认值是空字符串，即使用相对路径。
output.path和output.publicPath都支持字符串模板，内置变量只有一个：hash代表编译一次的hash值。

5. crossOrginLoading

webpack输出的部门代码可能需要异步加载，而异步加载时通过jsonp方式实现。jsonp的原理是动态的向html中插入一个script标签去异步加载资源。

output.crossOriginLoading则是用于配置这个异步插入标签的crossorigin值。

script标签的crossorigin属性可以取以下值：

1. anonymous(默认)在加载此脚本资源时不会带上用户的cookie；
2. use-credentials 在加载此脚本资源时会带上用户的cookies；

通常设置crossorigin来获取异步加载的脚本执行时的详细错误信息。

6. libraryTarge和library

当webpack去构建一个可以被其他模块导入使用的库时需要用到他们。

1. output.libraryTarget 配置以何种方式导出库。
2. output.library 配置导出库的名称。

它们通常搭配在一起使用。

output.libraryTarget是字符串的枚举类型，支持以下配置:

• 1. var(默认)

编写的库将通过var被赋值给通过library指定名称的变量。
假如配置了output.library=‘LibraryName‘, 则输出和使用的代码如下：

//webpack输出代码
var LibraryName = lib_code

//使用库的方法
LibraryName.doSomething()

假如output.library为空，则将直接输出：

lib_code //lib_code代指导出库的代码内容，是有返回值的一个自执行函数。

• 1. commonjs

编写库将通过commonjs规范导出。
假如配置了output.library=‘LibraryName‘, 则输出和使用代码如下：

//webpack输出的代码
exports[‘LibraryName‘] = lib_code

//使用库的方法
require(‘library-name-in-npm‘)[‘libraryName‘].doSomething()

• 1. commonjs2

编写的库将通过 commonjs2规范导出，输出和使用代码如下：

//webpack输出的代码
module.exports = lib_code

//使用库的方法
require(‘library-name-in-npm‘).doSomething()

• 1. this

编写的库将通过this被赋值给通过library指定的名称：

//webpack 输出的代码
this[‘LibraryName‘] = lib_code

//使用库的方法
this.libraryName.doSomething()

• 1. window

编写的库将通过window被赋值给library指定的名称

//webpack输出的代码
window[‘LibraryName‘] = lib_code

//使用库的方法
window.libraryName.doSomething()

• 1. global

编写的库将通过global被赋值给通过library指定的名称

//webpack输出的代码
global[‘LibraryName‘] = lib_code

//使用库的方法
global.libraryName.doSomething()

6. libraryExport

output.libraryExport配置要导出的模块中哪些子模块需要被导出，它只有在output.libraryTarget被设置为commonjs或者commonjs2时使用才有意义。
假如要导出的模块源码是：

export const a = 1
export default b = 2

现在你想让构建输出的代码只导出其中的a， 可以把output.libraryExport设置成a, 那么构建输出的代码和使用方法将变成如下：

 

module.exports = lib_code[‘a‘]

require(‘library-name-in-npm‘) === 1