webpack:js应用程序的静态模版打包器(module bundler)
- entry[入口]:指示webpack应该用哪个模块,来作为构建其内部依赖图的开始。
- 用法:entry:string|Array<string>【如果传入一个数组,将创建多个主入口[multi-main entry],在你想要多个依赖文件一起注入,并且将他们的依赖导向到一个“chunk”时,传入数组的方式就很有用】注:如果希望使用相对于配置文件的路径,使用path模块
- 对象语法:entry:{<key>:<value>}
这是最完整的entry配置,其他只是他的简化。因此在此详细介绍
对象中每一对属性对,都代表着一个入口文件。
key:可以是简单的字符串,并且对应着output.filename配置中的[name]变量
还可以是路径字符串,webpack会自动生产路径目录,并将路径的最后作为[name]
value:如果是字符串,必须是合理的node require函数参数字符串,比如文件路径,比如安装的npm模块
- output[输出]:即使可以存在多个入口,但只能有一个输出配置。
- 属性值最低要求是,设置为一个对象,包括filename和path,前者为输出文件的文件名,后者是目标输出目录的绝对路径。
当有第一个入口起点的时候,则用占位符[substitutions]来确保每个文件具有唯一的名称
如果filename有三个值:.[name]是entry的键值
.[hash]代表的是compilation的hash值
.[chunkhash]代表的是chunk的hash值
chunk在webpack中简单来说就是模块,所以chunkhash就是根据模块内容计算出的hash值
webpack中compilation:代表某个版本的资源对于的编译进程。当使用webpack的development中间件时,每次检测到项 目文件有改动就会创建一个compilation,进而能够针对改动产生全新的编译文件。compilation对象包含当前模块资源,待编译 文件、有改动的文件和监听依赖的所有信息。
webpack中的compiler:代表的是不变的webpack环境。他只在webpack启动时构建一次。
hash就是compilation对象计算所得,而不是具体的项目文件计算所得,因此同一配置的编译输出文件,所有文件名hash都一样。
- mode[模式]:有development和production两种
- loader:用于对模块的源代码进行转换,loader可以使你在import或加载模块时预处理文件。
- 使用loader的三种方式:
配置:在webpack.config.js文件中指定loader
内联:在每个import语句中显式指定loader
CLI:在shell命令中指定
2. 特性: 支持链式传递,能够对资源使用流水线。可以是同步的,也可以是异步的。等等。详细见官方文档
3.loader遵循模块解析。多数情况下从模块路径(通常认为是npm install, node_modules)解析。
- 插件[plugins]:目的是解决loader无法实现的其他事
webpack插件是一个具有apply属性的JavaScript对象。属性会被webpack compiler调用,并且complier对象可在整个编译生命周期访问
- configuration[配置]
webpack的配置文件,是导出对象就是文件。
可以做到:
通过require(...)导入其他文件,使用npm的工具函数。使用js控制流表达式。对常用值使用常量或变量。编写并执行函数来生成部分配置
- modules[模块]:程序分解成离散功能块
- module resolution[模块解析]:resolver是一个库,用于帮助找到模块的绝对路径
解析规则:使用enhanced-resolve,webpack能够解析三种文件路径:绝对路径,相对路径,模块路径
- Manifest
- Runtime
主要指,在模块交互时,连接模块所需的加载和解析逻辑。包括浏览器中已加载模块所需的加载和解析逻辑