小白上学之webpack5 - 第四章 webpack5的output配置

output

输出打包后的代码，配置如何输出和输出位置

在webpack.config中output包含以下属性：
path：代码打包后要输出的位置，且为绝对路径: 例如：path.resolve(__dirname, 'build')，则打包后的代码都会输出到当前目录下的build文件夹内。

publicPath：需要加载的资源的真实路径，默认为相对路径：例如:http://www.baidu.com/dist/，
则在index.html中可以看到script标签的src属性的值都加了publicPath的值。一般情况下我们都将它设置为/或者./

crossOriginLoading: 设置script的cross-origin属性，该属性有三个值：
false: 默认值, 表示不跨域；
anonymous: 表示跨域，不设置任何凭证；
use-credentials: 表示跨域，需要设置凭证；(基本用不到)

filename打包后的js文件名称，且需要写后缀

assetModuleFilename静态资源输出名称

chunkFilename 异步引入的文件名称，既在js中import('XXX.js').then(_=>{})这样引入或者通过webpack自带的异步引入方式等其他异步引入js的方式，这里就会使用配置的名称;asseet_[name]_[id].js可以配置成通用形式，也可以自己指定[chunk]值。

// webpack自带的一些内置变量一样的东西。
[name]：原始文件名称
[file]：原始路径，带文件名、后缀
[base]：原始文件名+后缀
[path]：路径名称，不带文件名称
[id]：可以设置，或者按照路径分割，啥都不管的话就等于webpack给当前文件引用的key值

library: 不仅仅是一个文件，而是需要导出一个库。则就会把入口文件export defalut导出的东西创建成一个ems形式的的包文件，即可在任意项目内就通过script或import形式引入使用了。
library.name包名称
library.type:var,module,umd,cmd,amd,require等等

library.export：指定哪个导出应该暴露为一个库，假如入口文件有log1，log2两个方法。则可以指定导出谁。
library.auxiliarycomment:在UMD模式下可用，可以在js内添加注释说明，一般用于，显示作者，代码版本号，版权等等信息。
library.umdNamedDefine: 在UMD模式下是否使用define

最常用的也就是这些了。