代码构建与webpack知识点-优快云博客

本文链接：https://blog.youkuaiyun.com/Sunday97/article/details/117332050

本文详细介绍了Webpack作为前端代码构建工具的功能，包括它如何处理模块化代码，与其他构建工具（如Gulp、Grunt）的区别。重点讲解了Webpack的四大核心概念：入口(entry)、输出(output)、Loader和插件(plugins)，以及它们在构建过程中的作用。Loader用于将非JavaScript模块转换为JavaScript，而插件则处理Loader无法完成的任务，如生成HTML文件和优化代码打包。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、Webpack 工具都做了些什么

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

2、常见的前端构建工具

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

涉及模块化代码打包的主要有 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。

深度理解：

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 样式文件。