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

博客原文链接：初识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

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