代码构建与webpack知识点

清疚 2022-10-16 06:27 166阅读 0赞

### 代码构建与webpack知识点 ###

*  1、Webpack 工具都做了些什么
 *  2、常见的前端构建工具
 *  3、了解Webpack
 *   *  （1）入口（entry）
     *  （2）输出（output）
     *  （3）Loader
     *  （4）插件（plugins）
     *  总结
     *   *  Webpack 到底对项目代码做了什么？

# 1、Webpack 工具都做了些什么 #

*  如今前端项目大多数都使用了模块化，而如果想要将多个文件的代码打包成最终可按照预期运行的代码，则需要使用到代码构建工具。
 *  不管项目代码是如何进行组织的，项目中又有多少个文件，最终浏览器依然会从 HTML 内容进行解析和加载，因此我们需要对项目中的代码进行构建（包括编译和打包），生成浏览器可正常解析和加载的内容

# 2、常见的前端构建工具 #

对于前端开发来说，我们会用到各式各样的构建/打包工具：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70_pic_center]

涉及模块化代码打包的主要有 Grunt/Gulp/Webpack/Rollup

*  Gulp/Grunt 是一种能够优化前端工作流程的工具，比如自动刷新页面、combo、压缩 CSS/JavaScript、编译 Less/Sass 等
 *  Webpack/Rollup 是一个 JavaScript 的模块打包器，用于整合编译成最终的代码。
 *  其中，Rollup 通常用来构建库，Webpack 更适合用来构建应用程序。

# 3、了解Webpack #

Webpack 的使用中有 4 个核心概念：入口（entry）、输出（output）、Loader、插件（plugins）

## （1）入口（entry） ##

首先便是入口（entry），entry 指向我们前端应用的第一个启动文件。例如，在 Vue 中是new Vue()位置所在的文件，在 Angular 中是启动.bootstrap()的文件，在 React 中则是ReactDOM.render()或者是React.render()的启动文件。

// 将entry指向启动文件即可
    module.exports = { 
      entry: "./path/to/my/entry/file.js",
    };

或许你会疑惑，入口的一个文件，又是怎样把整个前端项目中的代码关联起来，并进行打包的呢？

实际上， Webpack 会从 entry 开始，通过解析模块间的依赖关系，递归地构建出一个依赖图

## （2）输出（output） ##

输出（output）字段用于告诉 Webpack 要将打包后的代码生成的文件名是什么（filename），以及将它们放在哪里（path）。\#\# 入口（entry）

module.exports = { 
      output: { 
        filename: "bundle.js", // 编译文件的文件名，比如 main.js/bundle.js/index.js
        path: "/home/proj/public/assets", // 对应一个绝对路径，此路径是你希望一次性打包的目录
      },
    };

## （3）Loader ##

*  要了解 Loader，你需要知道在 Webpack 中，每个文件(.css,.html,.scss,.jpg等) 都会被作为模块处理。如果你看过生成的 bundle.js 代码就会发现，Webpack 将所有的模块打包一起，每个模块添加标记id，通过这样一个 id 去获取所需模块的代码。
 *  但实际上，Webpack 只理解 JavaScript，因此 **Loader 的作用就是把不同的模块和文件（比如 HTML、CSS、JSX、Typescript 等）转换为 JavaScript 模块。**
 *  而不同的应用场景需要不同的 Loader，比如我们经常会使用到的 CSS 相关 Loader 和其他资源 Loader。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]

深度理解：

*  ES6 模块需要依赖 Babel 编译和 Webpack 打包，而 Babel 在 Webpack 中就是使用 Loader 的方式来进行编译的。
 *  babel-loader 将 ES6/ES7 语法编译生成 ES5，其中部分特性还需要 babel-polyfill 支持。这是因为 Babel 默认只转换新的 JavaScript 语法（比如const/let），但不会对新的 API（比如Promise）进行处理。
 *  Webpack 在编译过程中，支持多个 Loader 通过流水线的方式进行先后编译，编译的顺序为从后往前，**最终以 JavaScript模块的方式输出**。
 *  **到这里，我们知道 Webpack 以 entry 为入口，链式调用各个 Loader 进行编译生成 JavaScript，最终打包放置在output 中。其中 Loader 只负责将其他非 JavaScript 模块转换成 JavaScript 模块。**

## （4）插件（plugins） ##

插件（plugins）主要负责解决 Loader 无法做到的事情，它可以访问在 Webpack 编译过程中的关键事件，对 Webpack 内部示例的一些数据进行处理，处理完成后回调 Webpack 让其继续。

这样说或许有些抽象，我们直接来看看几个常用的插件就明白了。

*  HtmlwebpackPlugin：可以生成创建 HTML 入口文件，也可以为 HTML 文件中引入的外部资源如 script、link 动态添加每次编译后的哈希值，防止引用缓存的外部文件问题。
 *  CommonsChunkPlugin：用来提取代码中的公共模块，并将这些公共模块按照预期进行打包生成独立的文件。
 *  ProvidePlugin：用来定义标识符，当遇到指定标识符的时候自动加载模块，适合引入的全局变量（比如 jQuery）。
 *  ExtractTextPlugin：可以将样式从 JavaScript 中抽出，生成单独的 .css 样式文件。

## 总结 ##

webpack的插件是可以用来控制最终生成的代码是如何进行组织和输出的，包括对代码的打包优化、压缩，甚至是启用模块热替换、重新定义环境中的变量，等等。

### Webpack 到底对项目代码做了什么？ ###

（1） 通过 entry 指定的入口开始，解析各个文件模块间的依赖。

（2）根据模块间的依赖关系，开始对各个模块进行编译。

（3）**编译过程中**，根据配置的规则对一些模块使用 Loader 进行编译处理。

（4）根据插件的配置，**对 Loader 编译后的代码**进行封装、优化、分块、压缩等。

（5）最终 Webpack 整合各个模块，根据依赖关系将它们打包成最终的一个或者多个文件。

最终让前端项目中模块化的代码能最终在浏览器中进行加载、并正常地工作。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70_pic_center]: /images/20221014/e4a77d5b0c02447e987a399b9f9f463b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]: /images/20221014/1290c7a2b2bc42ab8a9fdf89561059bc.png