webpack(一)——概念

webpack:js应用程序的静态模版打包器(module bundler)


  • entry[入口]:指示webpack应该用哪个模块,来作为构建其内部依赖图的开始。
  1. 用法:entry:string|Array<string>【如果传入一个数组,将创建多个主入口[multi-main entry],在你想要多个依赖文件一起注入,并且将他们的依赖导向到一个“chunk”时,传入数组的方式就很有用】注:如果希望使用相对于配置文件的路径,使用path模块
  2. 对象语法:entry:{<key>:<value>}

这是最完整的entry配置,其他只是他的简化。因此在此详细介绍

对象中每一对属性对,都代表着一个入口文件。          

key:可以是简单的字符串,并且对应着output.filename配置中的[name]变量 

          还可以是路径字符串,webpack会自动生产路径目录,并将路径的最后作为[name]

value:如果是字符串,必须是合理的node require函数参数字符串,比如文件路径,比如安装的npm模块


  • output[输出]:即使可以存在多个入口,但只能有一个输出配置。
  1. 属性值最低要求是,设置为一个对象,包括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或加载模块时预处理文件。
  1. 使用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

主要指,在模块交互时,连接模块所需的加载和解析逻辑。包括浏览器中已加载模块所需的加载和解析逻辑

猜你喜欢

转载自blog.csdn.net/m0_37829710/article/details/88389454