乐趣区

关于webpack:初识Webpack

jiezi

写作不易，未经作者容许禁止以任何模式转载！
如果感觉文章不错，欢送关注、点赞和分享！

博客原文链接：初识 Webpack

Webpack 初体验

用 Webpack 解决什么问题

  1. 模块化

  2. 高级个性、开发效率、安全性

    • ES6+、Typescript、sass、less
  3. 监听文件变动并反映到浏览器上，进步开发效率
  4. 开发实现后的打包，压缩、合并、tree-shaking 等以及其余相干的优化

Webpack 是什么

  • Webpck 是一个动态的模块化打包工具，为古代的 JS 应用程序

  • 咱们来对下面的解释进行拆解：

    • 打包 bundler：webpack 能够将帮忙咱们进行打包，所以它是一个打包工具。
    • 动态的 static：这样表述的起因是咱们最终能够将代码打包成最终的动态资源（部署到动态服务器）
    • 模块化 module：webpack 默认反对各种模块化开发，ES Module、CommonJS、AMD 等
    • 古代的 modern：古代前端开发面临各种各样的问题，才催生了 webpack 的呈现和倒退

Webpack 和 Vite

Webpack 会被 Vite 取代吗？

  1. vite 推出后的确引起了很多的反应，也有很多人看好 vite 的倒退

  2. 然而目前 vite 取代 webpack 还有很长的路要走

    • 目前 vue 我的项目反对应用 vite，也反对应用 webpack
    • vite 最终打包的过程，仍然须要借助于 rollup 实现

  3. vite 核心思想并不是独创

    • 事实上，vite 的思维和之前的 snowpack 是重合的，而且绝对目前来说 snowpack 会更加成熟
    • 当然，后续倒退来看 vite 可能会超过 snowpack

  4. webpack 的更新迭代

    • webpack 在倒退工程中，也会不断改进本人，借鉴其余工具的一些劣势和思维
    • 在这么多年的倒退中，无论是本身的劣势还是生态都是十分弱小的。

对于 Vite 的思考

  1. 学习任何的货色，重要的是学习核心思想

    • 学习了 JS 学 TS 不是从 0 开始
    • 学习了 Vue，学 React 也不是从 0 开始

  2. 任何工具的呈现，都是更好地服务于咱们开发

    • 无论是 vite 的呈现，还是当前新的工具呈现，不要有任何排挤的思维；
    • 咱们要粗浅地明确，工具都是为了更好地给咱们提供服务
    • 不可能呈现了某个工具，让咱们的开发效率变得更低，而这个工具却能够变得十分风行，这是不存在的

Webpack 默认打包

  • 咱们能够通过 webpack 进行打包，之后运行打包之后的代码

    • 在目录下间接执行 webpack 命令

      webpack

    • 间接在终端执行 webpack 可能本机装置版本和我的项目版本不同，所以在 package.json 中定义命令例如：”build”:”webpack”，这样就会依据 package.json 中的 webpack 版本进行打包（前提是已 install）。

  • 生成一个 dist 文件夹，外面寄存一个 main.js 文件，就是打包之后的文件

    • 这个文件中的代码被压缩和美化了
    • 临时不关怀他是如何做到的，后续我讲 webpack 实现模块化原理时会再次讲到。
    • 另外发现代码中仍然存在 ES6 的语法，比方箭头函数、const 等，这是因为默认状况下 webpack 并不分明咱们打包后的文件是否须要转成 ES5 之前的语法，后续咱们须要通过 babel 来进行转换和设置；

  • 发现能够失常进行打包的，然而有一个问题，webpack 是如何确地入口的？

    • 事实上，咱们运行 webpack 时，webpack 会查找到当前目录下的 src/index.js 作为入口
    • 所以，如果以后我的项目中没有 src/index.js，那么会报错

  • 当然也能够通过配置来指定入口和进口，例如(通常写配置文件)

    npx webpack --entry ./src/main.js --output-path ./build

Webpack 配置文件

  • 通常状况下，webpack 须要打包的我的项目是非常复杂的，并且咱们须要一系列的配置来满足要求，默认配置必然是不能够的。
  • 咱们能够在根目录下创立一个 webpack.config.js 文件，来作为 webpack 的配置文件, 例如
const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "build"),
  },
};
  • 继续执行 webpack 命令，仍然能够失常打包
  • 也能够不应用 webpack.config.js 作为文件名，应用命令定义门路和文件名即可，例如
  • webpack --config ./wk.congfig.js

Webpack 依赖图

webpack 到底是如何对咱们的我的项目进行打包的呢？

  • 事实上 webpack 在解决应用程序的时候，它会依据命令或者配置文件找到入门文件；
  • 从入口开始，会生成一个依赖关系图，这个依赖关系图会蕴含应用程序中所需的所有模块（比方 js 文件、css 文件、字体等）
  • 而后遍历图构造，打包一个个模块（依据文件的不同应用不同的 loader 解析）

Mode 配置

  • Mode 配置选项，能够告知 webpack 应用响应模式的内置优化:
  • 默认值是 production(什么都不设置的状况下);
  • 可选值有:’none’ | ‘development’ | ‘production’;
  • 这几个选项有什么样的区别呢?

Mode 配置代表配置了更多

  • 绿色选项 = 所有红色选项

Webpack 外围流程

援用于[万字总结] 一文吃透 Webpack 外围原理

这个过程外围实现了 内容转换 + 资源合并 两种性能，实现上蕴含三个阶段：

  • 初始化阶段：

    1. 初始化参数：从配置文件、配置对象、Shell 参数中读取，与默认配置联合得出最终的参数
    2. 创立编译器对象：用上一步失去的参数创立 Compiler 对象
    3. 初始化编译环境：包含注入内置插件、注册各种模块工厂、初始化 RuleSet 汇合、加载配置的插件等
    4. 开始编译：执行 compiler 对象的 run 办法
    5. 确定入口：依据配置中的 entry 找出所有的入口文件，调用 compilition.addEntry 将入口文件转换为 dependence 对象

  • 构建阶段：

    1. 编译模块(make)：依据 entry 对应的 dependence 创立 module 对象，调用 loader 将模块转译为规范 JS 内容，调用 JS 解释器将内容转换为 AST 对象，从中找出该模块依赖的模块，再 递归 本步骤直到所有入口依赖的文件都通过了本步骤的解决
    2. 实现模块编译 ：上一步递归解决所有能触达到的模块后，失去了每个模块被翻译后的内容以及它们之间的 依赖关系图

  • 生成阶段：

    1. 输入资源(seal)：依据入口和模块之间的依赖关系，组装成一个个蕴含多个模块的 Chunk，再把每个 Chunk 转换成一个独自的文件退出到输入列表，这步是能够批改输入内容的最初机会
    2. 写入文件系统(emitAssets)：在确定好输入内容后，依据配置确定输入的门路和文件名，把文件内容写入到文件系统

单次构建过程自上而下按程序执行，上面会开展聊聊细节，在此之前，对上述提及的各类技术名词不太熟悉的同学，能够先看看简介：

  • Entry：编译入口，webpack 编译的终点
  • Compiler：编译管理器，webpack 启动后会创立 compiler 对象，该对象始终存活晓得完结退出
  • Compilation：单次编辑过程的管理器，比方 watch = true 时，运行过程中只有一个 compiler 但每次文件变更触发从新编译时，都会创立一个新的 compilation 对象
  • Dependence：依赖对象，webpack 基于该类型记录模块间依赖关系
  • Module：webpack 外部所有资源都会以“module”对象模式存在，所有对于资源的操作、转译、合并都是以“module”为根本单位进行的
  • Chunk：编译实现筹备输入时，webpack 会将 module 按特定的规定组织成一个一个的 chunk，这些 chunk 某种程度上跟最终输入一一对应
  • Loader：资源内容转换器，其实就是实现从内容 A 转换 B 的转换器
  • Plugin：webpack 构建过程中，会在特定的机会播送对应的事件，插件监听这些事件，在特定工夫点染指编译过程

webpack 编译过程都是围绕着这些要害对象开展的，更具体残缺的信息，能够参考 Webpack 常识图谱。

Webpack 和 Gulp

  • gulp 的核心理念是 task runner

    • 能够定义本人的一系列工作，期待工作被执行;
    • 基于文件 Stream 的构建流; p 咱们能够应用 gulp 的插件体系来实现某些工作;

  • webpack 的核心理念是 module bundler pwebpack 是一个模块化的打包工具;

    • 能够应用各种各样的 loader 来加载不同的模块;
    • 能够应用各种各样的插件在 webpack 打包的生命周期实现其余的工作;

  • gulp 绝对于 webpack 的优缺点:

    • gulp 绝对于 webpack 思维更加的简略、易用，更适宜编写一些自动化的工作;
    • 然而目前对于大型项目（Vue、React、Angular）并不会应用 gulp 来构建，比方默认 gulp 是不反对模块化的。

优质文章举荐：

  1. [万字总结] 一文吃透 Webpack 外围原理
  2. [源码解读] Webpack 插件架构深度解说
  3. 十分钟精进 Webpack：module.issuer 属性详解
  4. 有点难的 webpack 知识点：Dependency Graph 深度解析
  5. 分享几个 Webpack 实用剖析工具
  6. 分享一份 Webpack 常识图谱

原文链接：初识 Webpack

掘金：前端 LeBron

知乎：前端 LeBron

  • 继续分享技术博文，关注微信公众号👇🏻

退出移动版