Webpack5 基础学习，5分钟快速上手

￡神魔★判官ぃ 2022-09-09 14:47 227阅读 0赞

点击上方 前端Q，关注公众号

回复加群，加入前端Q技术交流群

# 前言 #

对我来说，掌握一个工具最好的方式，就是在学习的过程中，总结并记录，尝试把自己学到的东西进行表达并分享，在分享的过程中，找到一个个同行的小伙伴，一起交流、学习，感受到学习技术的简单和纯粹。

《学习 Webpack5 之路》系列文章，标题灵感来自朴树的《平凡之路》，一直渴望一场走到东极岛的公路旅行，或许学习之路也能和平凡之路一样，让我获得满足和快乐。

《学习 Webpack5 之路》系列文章将分为以下 4 个系列，敬请期待：

*  基础篇
 *  实践篇
 *  优化篇
 *  原理篇

本文依赖的 webpack 版本信息如下：

*  webpack-cli\\@4.7.2\[1\]
 *  webpack\\@5.46.0\[2\]

# 一、Webpack 是什么 #

引入 webpack 官网\[3\] 介绍：

> 本质上，*webpack* 是一个现代 JavaScript 应用程序的\_静态模块打包器(module bundler)\_ 。当 webpack 处理应用程序时，它会递归地构建一个\_依赖关系图(dependency graph)\_ ，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 *bundle*。

webpack 官网\[4\] 图：

![a9c433d0ea6bd259ffb685984f057736.png][] image.png

在图中我们可以看到，webpack 将左侧错综复杂的各自不同类型文件的模板依赖关系，包括 .js、.hbs、.cjs、.sass、.jpg、.png 等类型文件，打包成 .js、.css、.jpg、.png 4 种类型的静态资源。

简单来说，webpack 就是一个静态资源打包工具，负责将项目中依赖的各个模块，打包成一个或多个文件。

# 二、为什么选择 Webpack #

> 本文不进行其他打包工具和 webpack 的优劣对比，仅介绍 webpack 能为开发者做的工作。

## 1. 模块化开发 ##

在没有各个 webpack 搭建的脚手架（create-react-app、vue-cli 等等）之前，我们通过在 HTML5 文件里引入一个个 Javascript 文件来进行开发，这就可能导致并行请求数量过多、存在重复代码等问题。

而通过 webpack，**我们可以使用 import、require 来进行模块化开发**。

**在 webpack 中一切皆模块**，js、css、图片、字体都是模块，而且支持静态解析、按需打包、动态加载、代码分离等功能，帮助我们优化代码，提升性能。

import { Hello } from './hello.js'
    import './assets/style.css'
    import MyImage './assets/img.jpg'
    复制代码

## 2. 新语法 ##

Javascript、CSS 的语法规范在不断更新，但是浏览器的兼容性却不能同步的更新，开发者可以通过 webpack 预处理器进行编译，**自由的使用 JS、CSS 等语言的新语法**。

webpack 使用 loader\[5\] 对文件进行预处理。你可以构建包括 JavaScript 在内的任何静态资源，如 Less、Sass、ES6、TypeScript。

通过预处理器将 TypeScript 编译成 JavaScript、SCSS 编译成 CSS、ES6 编译成 ES5 等。

开发者还可以使用 Node.js 轻松编写自己的 loader。

常用预处理器：

*  \`babel-loader\`\[6\] 使用 Babel\[7\] 加载 ES2015+ 代码并将其转换为 ES5；
 *  \`less-loader\`\[8\] 加载并编译 LESS 文件；
 *  \`sass-loader\`\[9\] 加载并编译 SASS/SCSS 文件；
 *  \`postcss-loader\`\[10\] 使用 PostCSS\[11\] 加载并转换 CSS/SSS 文件。

## 3. 主流框架脚手架 ##

Vue 脚手架 `vue-cli`、React 脚手架 `creact-react-app`、Taro 脚手架 `taro-cli` 都是使用 webpack，开发者掌握 webpack 后，可以自由配置脚手架，根据项目需要，调整 webpack 配置，以提高项目性能。

## 4. 其他 ##

webpack 除了让开发者能够拥有【**模块化开发+新语言+新框架**】的开发体验。

还有**以下优点：**

*  拥有依赖管理、动态打包、代码分离、按需加载、代码压缩、静态资源压缩、缓存等配置；
 *  webpack 扩展性强，插件机制完善，开发者可自定义插件、loader；
 *  webpack 社区庞大，更新速度快，轮子丰富；

如使用 ant-design 搭建的中后台项目，ant-desgin 提供了 webpack 定制主题的相关文档，较其他打包工具定制起来就简单很多，易上手。

因为 webpack 的这些优点，大部分的大型项目会选择 webpack 进行项目构建。

# 三、Webpack 的基本概念介绍 #

## 1. dependency graph（依赖图） ##

上文有提到，当 webpack 处理应用程序时，它会递归地构建一个\_依赖关系图(dependency graph)\_，那么依赖关系图是什么呢？

依赖图指的就是文件和文件直接的依赖关系，如上文引入过的图：

![356b69a97e7307f0f5301ccf2216fc59.png][] image.png

webpack 通过依赖关系图可以获取非代码资源，如 images 或 web 字体等。并会把它们作为 *依赖* 提供给应用程序。

每个模块都可以**明确表述它自身的依赖**，在打包时可根据依赖进行打包，避免打包未使用的模块。

## 2. entry（入口） ##

入口是指依赖关系图的开始，从入口开始寻找依赖，打包构建。

webpack 允许一个或多个入口配置。

配置示例如下：

module.exports = {
      entry: 'index.js',
    };
    复制代码

![20358cdaaec06da366f42f897e656b35.png][] image.png

## 3. output（输出） ##

输出则是用于配置 webpack 构建打包的出口，如打包的位置，打包的文件名等等。

配置示例如下：

module.exports = {
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js',
      },
    };
    复制代码

![791ffac83d512f764b41ce6f3046ada6.png][] image.png

## 4. loader ##

webpack 自带 JavaScript 和 JSON 文件的打包构建能力，无需格外配置。

而其他类型的文件，如 CSS、TypeScript，则需要安装 loader 来进行处理。

**loader** 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块\[12\]，以供应用程序使用，以及被添加到依赖图中。

配置示例如下：

module.exports = {
      module: {
        rules: [{ test: /.txt$/, use: 'raw-loader' }],
      },
    };
    复制代码

![008dc8670e378453fdcde46141d19aa6.png][] image.png

## 5. plugin（插件） ##

插件则是用于扩展 webpack 的能力，常见的插件有：

*  ProgressBarPlugin\[13\]：编译进度条；
 *  BundleAnalyzerPlugin\[14\]：打包体积分析；
 *  MiniCssExtractPlugin\[15\]：提取 CSS 到独立 bundle 文件。

配置示例如下：

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
    
    module.exports = {
      plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
    };
    复制代码

插件丰富，开发者社区同样提供了大量插件，也使得 webpack 的可用功能更加多样。

## 6. mode（模式） ##

webpack5 提供了模式选择，包括开发模式、生产模式、空模式，并对不同模式做了对应的内置优化。可通过配置模式让项目性能更优。

配置示例如下：

module.exports = {
      mode: 'development',
    };
    复制代码

## 7. resolve（解析） ##

resolve 用于设置模块如何解析，常用配置如下：

*  alias：配置别名，简化模块引入；
 *  extensions：在引入模块时可不带后缀；
 *  symlinks：用于配置 npm link 是否生效，禁用可提升编译速度。

配置示例如下：

module.exports = {
        resolve: {
            extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.d.ts'],
            alias: {
              '@': paths.appSrc,
            },
            symlinks: false,
          }
    }
    复制代码

## 8. optimization（优化） ##

optimization 用于自定义 webpack 的内置优化配置，一般用于生产模式提升性能，常用配置项如下：

*  minimize：是否需要压缩 bundle；
 *  minimizer：配置压缩工具，如 TerserPlugin、OptimizeCSSAssetsPlugin；
 *  splitChunks：拆分 bundle；
 *  runtimeChunk：是否需要将所有生成 chunk 之间共享的运行时文件拆分出来。

配置示例如下：

module.exports = {
      optimization: {
        minimizer: [
          // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
          // `...`,
          new CssMinimizerPlugin(),
        ],
        splitChunks: {
          // include all types of chunks
          chunks: 'all',
          // 重复打包问题
          cacheGroups:{
            vendors:{ //node_modules里的代码
              test: /[\\/]node_modules[\\/]/,
              chunks: "all",
              name: 'vendors', //chunks name
              priority: 10, //优先级
              enforce: true 
            }
          }
        },
      },
    }
    复制代码

以上对 webpack 的基本概念做了简单的介绍，为后续实践篇做准备。

# 四、总结 #

本文从 webpack 是什么、为什么选择 webpack、webpack的基本概念介绍 3个角度进行讲述，从 Webpack 基础着手，和你一起了解 webpack。

《学习 Webpack5 之路》系列文章将分为以下 4 个系列：

*  基础篇
 *  实践篇
 *  优化篇
 *  原理篇

下一篇《学习 Webpack5 之路（实践篇）》将从实践出发，一起完成一个比较完整的 webpack 配置，敬请期待。

本文源码：webpack Demo0：https://github.com/jiaozitang/webpack-demo/tree/release\_v0

希望能对你有所帮助，感谢阅读～

别忘了点个赞鼓励一下我哦，笔芯❤️

关于本文

# 来源：清汤饺子 #

https://juejin.cn/post/6991630925792542750

声明：文章著作权归作者所有，如有侵权，请联系小编删除。

内推社群

我组建了一个氛围特别好的腾讯内推社群，如果你对加入腾讯感兴趣的话（后续有计划也可以），我们可以一起进行面试相关的答疑、聊聊面试的故事、并且在你准备好的时候随时帮你内推。下方加 winty 好友回复「面试」即可。

![66b7a764db3e6c5e897cff768a370e98.png][]

![1b11a5ec342a3ed9b320046d5159bc43.png][]

往期推荐

[大厂面试过程复盘(微信/阿里/头条,附答案篇)][Link 1]

![d03189fb647e880f019012ac0ad87b12.png][]

[面试题：说说事件循环机制(满分答案来了)][Link 2]

![c85e1aa0ca8670dfccea4cd77a068b98.png][]

[专心工作只想搞钱的前端女程序员的2020][2020]

![c7d6bba7b602d8391051ea70304982de.png][]

[a9c433d0ea6bd259ffb685984f057736.png]: /images/20220829/25473b5d747748b388a26cccf0869fb2.png
[356b69a97e7307f0f5301ccf2216fc59.png]: /images/20220829/16d3a4a2bddd45ed86ee06c723a7254a.png
[20358cdaaec06da366f42f897e656b35.png]: /images/20220829/078df3b0644644ceac3ec71b3d9b1e49.png
[791ffac83d512f764b41ce6f3046ada6.png]: /images/20220829/45e00c6bea8e40d7a74fca69d8b7d5ac.png
[008dc8670e378453fdcde46141d19aa6.png]: /images/20220829/ed294e0880e74e038cdd490454d8e420.png
[66b7a764db3e6c5e897cff768a370e98.png]: /images/20220829/dc9bfc4addea44f182041dcfcdaabb65.png
[1b11a5ec342a3ed9b320046d5159bc43.png]: /images/20220829/661bc2c2c4b54839b72a5b4165feead3.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng%3D%3D&chksm=f175e460c6026d76bcdfc6dd42cfe80a3f14ea832d1922d65043f666d6de22bd17b09e779ed9&idx=2&mid=2649829027&scene=21&sn=1a433047a8d6e8af65012bfa0bd27e3f#wechat_redirect
[d03189fb647e880f019012ac0ad87b12.png]: /images/20220829/2a93dbbae7264133b0f6f189c0d17874.png
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng%3D%3D&chksm=f175ef9ec60266880a86f33085ff43f95e3180846c5f139cb9b1b33c3245201157f39d949e9a&idx=1&mid=2649826653&scene=21&sn=9e5e2de78a8ef4de3820769ff3ab7c02#wechat_redirect
[c85e1aa0ca8670dfccea4cd77a068b98.png]: /images/20220829/9e5a03fc512445d89fd2817a5149ca91.png
[2020]: http://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng%3D%3D&chksm=f175f306c6027a1029967cde600630a5107fbbfdd125b64ba3f2c9d9b570b102162ab4c3b373&idx=1&mid=2649831877&scene=21&sn=9352cf4624308602c50a6fd10379d132#wechat_redirect
[c7d6bba7b602d8391051ea70304982de.png]: /images/20220829/d9d2dfd4c1a54ee9b2b14ffa98395fc6.png