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是字符串的枚举类型,支持以下配置:
-
- var(默认)
编写的库将通过var被赋值给通过library指定名称的变量。
假如配置了output.library='LibraryName', 则输出和使用的代码如下:
//webpack输出代码
var LibraryName = lib_code
//使用库的方法
LibraryName.doSomething()
假如output.library为空,则将直接输出:
lib_code //lib_code代指导出库的代码内容,是有返回值的一个自执行函数。
-
- commonjs
编写库将通过commonjs规范导出。
假如配置了output.library='LibraryName', 则输出和使用代码如下:
//webpack输出的代码
exports['LibraryName'] = lib_code
//使用库的方法
require('library-name-in-npm')['libraryName'].doSomething()
-
- commonjs2
编写的库将通过 commonjs2规范导出,输出和使用代码如下:
//webpack输出的代码
module.exports = lib_code
//使用库的方法
require('library-name-in-npm').doSomething()
-
- this
编写的库将通过this被赋值给通过library指定的名称:
//webpack 输出的代码
this['LibraryName'] = lib_code
//使用库的方法
this.libraryName.doSomething()
-
- window
编写的库将通过window被赋值给library指定的名称
//webpack输出的代码
window['LibraryName'] = lib_code
//使用库的方法
window.libraryName.doSomething()
-
- 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