关于前端工程化:后端视野学-Webpack-文武双全

大家好，我是小菜。
一个心愿可能成为 吹着牛 X 谈架构 的男人！如果你也想成为我想成为的人，不然点个关注做个伴，让小菜不再孤独！

本文次要介绍 Webpack 应用

如有须要，能够参考

如有帮忙，不忘 点赞 ❥

微信公众号已开启，小菜良记，没关注的同学们记得关注哦！

前端认知

挺多人对前端开发是存在肯定的误会的，感觉会点 H5 + C3 + JS 就等于会前端开发，但近几年前后端拆散的模式逐步流行起来，就阐明前端早已没有之前那么简略。

站在我这个后端的视角上倒感觉，前端是个武官，后端是个武将，不能说做到能文能武，但起码求武的同时不能 不识一丁，退一两步来说，以后端实习妹子遇到 Bug 束手无措的时候，你这伪境前端若能出手相助~ 那在她人眼中你就是一位 ‘ 架着七彩祥云而来的盖世英雄~’

如果说你会 Bootstrap 加上 Layui，那么就说你会前端，难免会被人拍死在沙滩上~ 实际上的前端开发是由以下几个模块组成：

• 模块化（js 的模块化，css 的模块化，资源的模块化）
• 组件化（复用现有的 UI 构造，款式，行为）
• 规范化（目录构造的划分、编码规范化、接口规范化、文档规范化、Git 分支治理）
• 自动化（自动化构建、主动部署、自动化测试）

与后端一模一样，该有的模块都有。

说到工程化，在后端开发中存在支流的解决方案有 Maven 工程 和 Gradle 工程。前端工程化解决方案也有 webpack 和 vite。那么就进入咱们明天的正题， 走进 Webpack

Webpack

一、概念认知

实质上，webpack 是一个用于古代 JavaScript 应用程序的 动态模块打包工具 。当 webpack 解决应用程序时，它会在外部从一个或多个入口点构建一个 依赖图，而后将你的我的项目中所需的每一个模块组合成一个或多个 bundles，它们均为动态资源，用来展现你的内容。

以上内容摘于官网，官里官气的。上面咱们简略概括一下

• 概念总结：webpack 是前端我的项目工程化的具体解决方案

• 性能总结：

  1. 提供了敌对的前端模块化开发的反对
  2. 提供了代码压缩混同、解决浏览器兼容 Js、以及性能优化等弱小性能
• 长处总结：进步了前端开发效率和我的项目的可维护性

二、根本应用

实际出真知！咱们间接应用来增强意识。

首先咱们须要创立一个空白目录，而后在空白目录中执行 npm init -y 来初始化包治理配置文件 package.json

能够简略了解为这个 package.json 就相当于 maven 工程中的 pom.xml 文件

在 Maven 工程中咱们通常上都是把源代码放在 src 目录底下，该 webpack 工程相似，因而咱们下一步便是在该目录下创立 src 目录，继而创立两个文件 index.html (首页) 和 index.js（脚本文件）

咱们传统上要引入 Jquery 文件，个别有两种形式

• 一种是下载 jquery.mini.js 文件，而后在我的项目中引入

<script src="../js/jquery.js"></script>

• 一种是援用网上现成的 CDN 库，这样能够不必下载

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

两种形式各有优劣，这里不做过多阐明！

既然咱们该我的项目是应用 npm 初始化的，那咱们便能够应用 npm 来帮咱们下载好所须要的包

npm install jquery -s

增加胜利后咱们能够在 package.json 文件中看到咱们刚刚下载的包，这种形式有没有让你回想到 maven 的 maven install 命令，这种奇怪的相熟感~

等 jquery 包装置实现后，咱们就能够在 node_modules 目录下查看到刚刚装置的包

而后在我的项目中进行援用

浏览器查看 JS 运行失常

以上形式也是传统的引包形式，跟 webpack 仍是没有半点关系。接下来咱们就来看看 webpack 是如何应用的。

1、webpack 装置

在终端中运行如下命令，装置与 webpack 相干的两个包：

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

扩大

• npm install xxx -S，也就是 npm install module_name --save 写入 dependencies
• npm install xxx -D，也就是 npm install module_name --save-dev写入 devDependencies

devDependencies，是咱们开发的时候须要用到的一些包，只须要用于开发阶段，真正打包上线的时候并不需要这些包，
dependencies，这个则是须要公布到生产环境中的。

2、webpack 配置

咱们须要在我的项目的根目录中，创立一个名为 webpack.config.js 的 webpack 配置文件，并初始化如下的根本配置：

module.exports = {mode: "development"}

其中的 mode 是个可变值，存在两个可选值

• development

1、实用于 开发环境

2、不会对打包生成的文件进行代码压缩和性能优化

3、打包速度快，适宜在开发阶段应用，可能疾速响应页面的更改

• production

1、实用于 生产环境

2、会对打包生成的文件进行代码压缩和性能优化

3、打包速度很慢，仅适宜在我的项目公布阶段应用

1）配置文件的作用

webpack.config.js 是 webpack 的配置文件，webpack 在真正开始打包构建之前，会 先去读取这个配置文件，从而基于给定的配置，对我的项目进行打包

因为 webpack 是基于 node.js 开发进去的打包工具，因而在它的配置文件中是反对 node.js 相干的语法和模块进行 webpack 个性化配置的

而后咱们这里先打个 载入点①，先回到刚刚说到的 webpack 应用，等会再回来介绍 webpack！

在 Java 中有句相熟的话：万物皆对象 ，因而在前端工程中咱们同样有句话： 万物皆模块

咱们曾经不须要传统的 js 导入形式：

<script src="../node_modules/jquery/dist/jquery.min.js"></script>

咱们能够在有须要 jquery 的中央应用 import 的形式导入，jquery 是页面 index.html 须要的吗？并不是，而是 index.js 脚本文件须要，所以咱们只须要在 index.js 文件中导入

而后咱们还须要批改 package.json 文件：

咱们新增了 dev 脚本，在 script 节点下的脚本，能够通过 npm run 执行。

而后咱们在终端上运行 npm run dev 命令，启动 webpack 进行我的项目的打包构建

啪一下，很快啊！就在我的项目目录中生成了一个 dist 目录，并存在 main.js 脚本文件

咱们继而在 index.html 文件中引入该 main.js 文件，先间接看后果，咱们右键在浏览器关上

能够发现，js 运行失常，那么 main.js 是啥玩意？

在 webpack 4.x 和 5.x 的版本中有如下默认约定：

• 默认的打包入口文件为 src/index.js
• 默认的输入文件门路为 dist/main.js

规定是 die 的，人是活的，因而咱们能够在 webpack.config.js 中批改打包的默认约定！

既然理解了约定，因而咱们就能够晓得在 main.js 中蕴含了 index.js 内容，咱们能够间接查看 main.js 文件，后果如咱们所料

咱们回到之前的 载点① 持续刚刚 webpack.config.js 配置文件的阐明

咱们在 webpack.config.js 文件中能够通过 entry 节点指定打包的入口，而后通过 output节点指定打包的进口。

这就是咱们下面所说的突破默认规定！

下面咱们也说完了 webpack 的根本应用，那咱们上面就来看看 webpack 中的插件应用

三、插件应用

插件 顾名思义就是用来扩大 webpack 的性能，通过装置和配置第三方的插件，能够扩大 webpack 的能力，从而让 webpack 应用起来更加不便。最罕用的 webpack 有两个：

• webpack-dev-server

1、相似于 node.js 阶段用到的 nodemon 工具

2、每当批改了源代码，webpack 会主动进行我的项目的打包和构建

• html-webpack-plugin

1、相似于一个模板引擎

2、能够通过此插件自定制 index.html 页面中的内容

咱们先来看如何应用第一个插件

1）webpack-dev-server

webpack-dev-server 能够让 webpack 监听我的项目源代码的变动 ，从而进行 主动打包构建

① 装置

应用以下命令即可在我的项目中装置该插件

npm install webpack-dev-server@3.11.2 -D

② 配置

1、须要批改 package.json 中的 script

"scripts": {"dev": "webpack server"}

2、运行 npm run dev 命令

能够看到一句话：我的项目正在运行于 localhost:8080/。并且运行后并没有呈现 dist 目录

而后咱们通过该地址拜访却没有看到咱们想要的页面，而是须要点击 src 目录能力拜访

依据以上后果，咱们可能有如下疑难：

• 为什么运行 npm run dev 会呈现了一个拜访地址呢？

这是因为 webpack-dev-server 会启动一个 实时打包的 http 服务器

• 打包生成的文件在哪？

想要解答这个问题，咱们就得须要晓得两点 – 配置和不配置 webpack-dev-server 的区别

1、不配置 webpack-dev-server 的状况下，webpack 打包生成的文件，会寄存到理论的物理磁盘上（依据 output 指定门路进行寄存）

2、配置 webpack-dev-server 的状况下，打包生成的文件会寄存到内存上，不再依据 output 节点指定的门路寄存，这样的益处是进步了实时打包输入的性鞥你，因而内存比物理磁盘速度快很多

• 生成到内存中的文件该如何拜访？

生成到内存中的文件，默认是放到了我的项目的根目录中，然而是虚构不可见的，咱们能够间接用 / 示意我的项目根目录，前面跟上要拜访的文件名称，即可拜访内存中的文件。

以三个问题收尾，咱们来说下一个插件 html-webpack-plugin

2）html-webpack-plugin

咱们下面通过拜访 webpack server 给定的 URL 地址，发现不能间接拜访到咱们的 index 页面，这不免有些缺点，有缺点天然就会有改良，这就能够聊到 html-webpack-plugin 这个插件了~！

① 装置

老样子，咱们须要通过以下命令进行装置

npm install html-webpack-plugin@5.3.2 -D

② 配置

③ 运行

咱们通过运行 npm run dev，而后看后果

通过该插件，咱们能够看到曾经能够间接通过门路拜访该页面~

这里有小伙伴可能会提出问题，如果我不想通过 8080 端口能够吗，甚至不想通过 localhost 拜访能够吗？答案是能够的，咱们能够通过 devServer 节点 对 webpack-dev-server 插件进行更多的配置：

devServer: {
    // 首次打包胜利后，主动关上浏览器
    open: true,
    // 在 http 协定中，如果端口号是 80，则能够被省略
    port: 8081,
    // 指定运行的主机地址
    host: '127.0.0.1'
},

而后咱们运行我的项目后通过 127.0.0.1:8081 拜访页面：

到这里咱们就曾经介绍了两个插件的应用，接下来咱们将看点不一样的货色~！

四、loader 应用

咱们在结尾的时候曾经说过一句话，在前端工程化中，万物皆模块。因而咱们能够在 index.js 脚本文件中通过 import 的形式导入 jquery js 文件。那遇到 css 文件是否一样可能通过 import 导入？咱们不妨一试：

当咱们想要通过 import 的形式导入该 css 文件，控制台却给了咱们一句话：你可能须要一个适当的 loader 来解决这种文件类型 ， 适当的？loader？。那就进入正题，什么是 loader！

在理论开发过程中，webpack 默认只能打包解决以 .js 后缀名结尾的模块。其余非 .js 后缀名结尾的模块，webpack 是解决不了，也就是会呈现咱们下面的那种状况，但怎么解决呢？就须要像提醒文本所说的那样，咱们须要下载一个适当的 loader 来解决这种文件类型。

loader 加载器有许多种，但它们的作用就只有一个，那就是 帮忙 webpack 来打包解决特定的文件模块

• css-loader：能够打包解决 .css 相干的文件
• less-loader：能够打包解决 .less 相干的文件
• babel-loader： 能够打包解决 webpack 无奈解决的高级 JS 语法

接下来咱们就来解决下面遇到 css 导包的问题

① 装置

通过以下命令来装置解决 css 文件的 laoder

npm i style-loader@3.0.0 css-loader@5.2.6 -D

② 配置

咱们须要在 webpack .config.js 文件中配置相应的 loader 规定

module: {
  rules: [
    // 解决 .css 文件的 loader
    {test: /\.css$/, use: ['style-loader', 'css-loader'] },
  ]
}

③ 运行

继而咱们运行文件，浏览器看成果

该后果曾经阐明了 css-loader 曾经起到作用了。咱们看下规定的编写形式是怎么样的：

{test: /\.css$/, use: ['style-loader', 'css-loader'] }

其中 test 示意匹配的文件类型，use 示意对应要调用的 loader

• use 数组中的 loader 程序是固定的
• 多个 loader 的调用程序是 从后往前调用

其它 loader 的应用形式与下面统一，都是须要先装置，而后在 webpack.config.js 文件中配置

1）less-loader

装置

npm i less-loader@10.0.1 less@4.1.1 -D

配置

module: {
  rules: [
    // 解决 .css 文件的 loader
    {test: /\.css$/, use: ['style-loader', 'css-loader'] },
    // 解决 .less 文件的 loader
    {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
  ]
}

2）babel-loader

装置

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

配置

module: {
  rules: [
    // 解决 .css 文件的 loader
    {test: /\.css$/, use: ['style-loader', 'css-loader'] },
    // 解决 .less 文件的 loader
    {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
    // 解决 JS 高级语法的 loader
    {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
  ]
}

下面咱们看到几种 loader 的作用，那么其中解决流程是怎么样的呢？咱们用张图解释下：

五、打包公布

实现以上我的项目开发后，咱们就要来到 打包公布 的阶段，后面所做的所有，到最初必定都是须要公布的，那么为了能让我的项目在生产环境中高性能运行，就须要对我的项目打包公布。

① 配置

打包公布同样须要配置，咱们须要在 package.json 文件下的 script 节点 进行配置：

其中 --model 是一个参数项，用来指定 webpack 的运行模式，咱们在下面曾经介绍过了~ 而后通过指令 npm run build，咱们就能够在我的项目的根门路下看到咱们相熟的 dist 目录了

然而如果没有指定的规定配置，默认会将打包后的文件都放到 dist 目录下，然而如果咱们想要将 js 文件 放到 js 目录下，image 文件放到 image 目录下 咱们就须要在 webpack.config.js 进行相应的配置

后面咱们 js 文件的生成目录曾经通过 output 节点 进行配置了

那么咱们还须要配置其余文件的输入目录，这里以图片类型的文件为例：

咱们同样是在 webpack.config.js 文件中配置，不过此时是在 rules 节点 中进行配置：

进行到这步咱们曾经差不多实现了打包工作，然而咱们如果更改了 js 生成目录，这个时候会产生什么呢？

咱们发现会生成冗余的文件，并没有把旧文件删除，这难道每次打包都要进行手动删除吗？当然不是！为了在每次打包公布时 主动清理掉 dist 目录中的旧文件，能够装置并配置 clean-webpack-plugin 插件

装置

npm install clean-webpack-plugin@3.0.0 -D

配置

运行

六、Source Map

这种 Source Map 就有点意思了，咱们后端上线后，如果呈现问题，咱们通常会进入到服务器中查看报错日志。那么前端如果呈现问题就很不便了，咱们能够间接通过 F12 关上控制台查看报错日志，而且也能够对 js 文件进行 debug。然而咱们下面说过通过 mode 指定 production 值后会对代码进行压缩，那么调试是一件即为艰难的事件。

Source Map 就是用来解决这种问题的。

1）概念

Source Map 是一个信息文件，外面存储着地位信息，也就是 转换后 -> 转换前 的地位映射。在它的帮忙下，出错的时候，能够间接显示原始代码，而不是转换后的压缩代码，能够在肯定水平上进步排错效率。

2）应用

失常在开发环境下，webpack 是默认开启了 Source Map 性能，当程序运行出错的时候，能够间接在控制台提醒谬误地位的信息

然而这种提醒是不敌对的，它记录的是压缩后代码的地位，这样导致的问题就是 理论运行报错的行数 与 源代码的行数 不匹配，这将成为咱们排错路上的 绊脚石 ~！

既然如此，那咱们就带着问题解决问题！

3）所遇问题

① 问题 1：理论运行报错的行数 与 源代码的行数 不匹配

那么要解决这个问题也很简略，就须要在 webpack.config.js 中增加以下配置：

配置完查看后果，至此咱们能够发现 运行报错的行数 与 源代码的行数 是相匹配的！

② 问题 2：生产环境中容易裸露源码

以上咱们尽管曾经能够定位到源码的谬误，然而如果在生产环境中，裸露源码终归不是一件坏事，因而咱们同样要解决该问题。

解决该问题的形式也很暴力，间接打包的时候在 webpack.config.js 文件中将mode 指定为 production，这样不会显示报错行数，也不会显示源码内容

mode: "production"

③ 问题 3：生产环境需显示行数暗藏源码

下面那种形式过于暴力，行数和源码一股脑都不给你显示了。那有没有比拟这种的形式，能够显示行数但不显示源码？答案必定是有的！咱们只需将 devtool 的值配置为 nosources-source-map 即可

devtool: 'nosources-source-map'

配置结束咱们看成果：

该形式既能够显示 报错行数 也能够暗藏源码，是一种非常适合解决方案。

因而咱们做个总结

4）总结

• 开发环境

将 devtool 的值设置为 eval-source-map，有利于精准定位到具体的谬误行

• 生产环境

敞开 Source Map 或将 devtool 的值设置为 nosource-source-map，有利于避免源码透露，进步安全性

END

咱们这篇从 六 点去演绎了 webpack 的根本应用，后端的同学能够 精益求精 ，再不济看完后也能够和前端妹子有些共同话题~！前端的同学能够 温故知新，可能这篇略显毛糙，但帮忙挑错，也未免是为本人坚固根底~！

不要空谈，不要贪懒，和小菜一起做个 吹着牛 X 做架构 的程序猿吧~ 点个关注做个伴，让小菜不再孤独。咱们下文见！

明天的你多致力一点，今天的你就能少说一句求人的话！

我是小菜，一个和你一起变强的男人。 💋

微信公众号已开启，小菜良记，没关注的同学们记得关注哦！