美文网首页
webpack核心概念

webpack核心概念

作者: 林立镇 | 来源:发表于2018-05-09 14:25 被阅读0次

概念

Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。
Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。
Loader:模块转换器,用于把模块原内容按照需求转换成新内容。
Plugin:扩展插件,在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
Output:输出结果,在 Webpack 经过一系列处理并得出最终想要的代码后输出结果

流程

Webpack 启动后会从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有 Module。

每找到一个 Module, 就会根据配置的 Loader 去找出对应的转换规则,对 Module 进行转换后,再解析出当前 Module 依赖的 Module。

这些模块会以 Entry 为单位进行分组,一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk。

最后 Webpack 会把所有 Chunk 转换成文件输出。

在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。

内容参考: 深入浅出webpack

相关文章

  • webpack-dev-server 核心概念

    webpack-dev-server 核心概念 Webpack 的 ContentBase vs publicPa...

  • webpack核心概念

    概念 Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。Module:模块,...

  • Webpack - 核心概念

    如果你稍微了解过 HTTP,肯定知道一大堆文件请求对于浏览器是什么样的灾难。然而,数以百计的 JS 文件和 CSS...

  • webpack 核心概念

    1、Entry 入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的...

  • webpack初学概念

    webpack概念:webpack是现代 JavaScript 应用程序的静态模块打包器 核心概念 1.ent...

  • 第二节:Webpack核心概念与安装使用

    1. Webpack的核心概念 1.1 核心概念说明: 1.1.1 入口(entry) 入口起点(entry po...

  • 第二节:Webpack核心概念与安装使用

    1. Webpack的核心概念 1.1 核心概念说明: 1.1.1 入口(entry) 入口起点(entry po...

  • Webpack打包工具

    webpack的核心概念:Entry,Output,Loaders,Plugins。webpack的默认配置文件是...

  • webpack(3.0)打包工具简介

    webpack的核心概念:Entry,Output,Loaders,Plugins。webpack的默认配置文件是...

  • webpack2

    使用webpack构建项目 webpack核心概念 webpack 是一个现代 JavaScript 应用程序的模...

网友评论

      本文标题:webpack核心概念

      本文链接:https://www.haomeiwen.com/subject/smwnrftx.html