深刻浅出webpack学习(3)--Output

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