Vue 项目之 Webpack 的基础打包(1)

296 阅读4分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

1. 认识 Webpack

Webpack 是什么?Webpack 是一个前端的构建工具。为什么会出现这样一个构建工具呢?

因为随着前端的快速发展,目前前端的开发已经变得越来越复杂了:

  • 比如开发过程中我们需要通过模块化的方式来开发;
  • 比如会使用一些高级的特性来加快我们的开发效率或者安全性:比如通过 ES6+TypeScript 开发脚本逻辑,通过 sassless 等方式来编写 css 样式代码;
  • 比如开发过程中,我们希望实时的监听文件的变化并且反映到浏览器上,以提高开发效率;
  • 比如开发完成后我们还需要将代码进行压缩、合并以及其它相关的优化
  • 等等

但是对于很多的前端开发者来说,并不需要思考这些问题,日常的开发中根本就没有面临这些问题:

  • 这是因为目前前端开发我们通常都会直接使用三大框架(VueReactAngular)来开发;

  • 但事实上,这三大框架的创建过程我们都是借助于它们各自提供的脚手架(CLI)工具(通过脚手架可以帮助我们搭建好整个项目的架构,之后我们就可以在这个基础上进行开发)的;

  • 而这三大框架的脚手架(Vue CLIcreate-react-appAngular CLI)又都是基于 Webpack 来帮助我们支持模块化、lessTypeScript、打包优化等的:

    image-20211020194946809

所以,我们应该学习一下 Webpack,以便更好地学习脚手架。

现在,我们已经知道了 Webpack 的重要性,下面,我们再来看下 Webpack 官网对它的解释:

image-20211021222750784

翻译一下就是:webpack 的核心是一个用于现代 JavaScript 应用程序静态模块打包工具

我们来对上面的解释进行拆解:

  • 打包工具(bundler):webpack 可以帮助我们对代码进行打包,所以它是一个打包工具;
  • 静态的(static):这样表述的原因是我们最终可以将代码打包成静态资源(部署到静态服务器);
  • 模块(module):webpack 默认支持各种模块化开发,包括 ECMAScript modules(在某些浏览器中才能使用)、CommonJS modules(在 Node 中才能使用)、AMD modulesAssetsWebAssembly modules1
  • 现代的(modern):我们前面说过,正是因为现代前端开发面临各种各样的问题,才催生了 webpack 的出现和发展;

再来看一张官网的图:

image-20211021225725186

这张图的含义是:我们可以编写一大堆有依赖关系的模块(代码文件,比如 js 文件、cjs 文件(CommonJS 文件)、hbs 文件(一种模板引擎的代码文件)、png 文件、jpg 文件、sass 文件、less 文件、ts 文件等等),但是这里面有些格式的代码文件如果直接交给浏览器,浏览器是不认识的,而 webpack 所做的就是将这一大堆的文件进行打包,打包后会生成静态资源,里面就都是些浏览器可以识别的文件格式(js 文件、css 文件、jpg 文件、png 文件等),然后让浏览器去访问这些打包后的文件代码就可以了。

你可能会问,既然浏览器不能直接访问我们编写的代码(比如 ts 文件代码、sass 文件代码),那我们为啥还要去编写这些代码呢?这是因为我们可以通过编写这些文件格式的代码,提升代码的安全性、健壮性以及提高代码的编写效率。所以我们在开发中常常会用到诸如 tssassless 等技术,但是我们又希望浏览器到时候可以直接运行代码,那就必须把我们的代码进行打包之后再交给浏览器运行,而这个打包的过程我们就可以交给 webpack 这个工具来完成啦。

下面,我们将针对 Vue 项目的开发学习 Webpack 相关的知识。

Footnotes

  1. 参考 webpack.js.org/concepts/mo…