乐趣区

关于webpack:小白上学之webpack5-第四章-webpack5的output配置

output

输入打包后的代码,配置如何输入和输入地位

webpack.configoutput蕴含以下属性:
path:代码打包后要输入的地位,且为绝对路径: 例如:path.resolve(__dirname, 'build'),则打包后的代码都会输入到当前目录下的 build 文件夹内。

publicPath:须要加载的资源的实在门路,默认为相对路径:例如:http://www.baidu.com/dist/
则在 index.html 中能够看到 script 标签的 src 属性的值都加了 publicPath 的值。个别状况下咱们都将它设置为 / 或者./

crossOriginLoading: 设置 scriptcross-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

最罕用的也就是这些了。

退出移动版