98f0eff4cbd5d1ac6f33eaedd9e66663
webpack 从 0 到 1 构建 vue

前端领域框架百花齐放,各种优秀框架出现(react,Vue,ag)等等框架。为了方便开发者快速开发, 开发对应的 cli 脚手架,来提高产出。然而初中级的前端工程师对项目里的 webpack 封装和配置了解的不清楚,就容易导致出问题不知如何解决,甚至不会通过 webpack 去扩展新功能,对 webpack + vue 项目究竟是怎样搭建起来的感到一脸困惑,下面我们就来解决这个问题,揭开 webpack 构建 vue 的面纱。

什么是 webpack ?

酷炫动画的页面,高度复杂的页面功能,页面内容支持预加载(图片、骨架屏) ,这些高要求导致了项目的增加更多的代码。代码的增多,使得由来代码需要被组织的需求,由此产生了模块化。

模块化的发展历程

传统的 <script> 标签,一个标签加载一个 js 文件。缺点就是全局变量太多,容易出现冲突,另外依赖顺序很重要,太多 js 不好管理 。后面出现了 node.js,有了 CommonJS 规范(同步的 require 请求),即一个模块是一个文件,想用谁直接 require 谁,想被谁用,就 module.exports 导出去。

虽然服务端使用起来方便,但是浏览器通过网络请求获取文件是异步的,所以出现了矛盾。为了解决 CommonJS 规范的缺陷,AMD 规范(异步的 require 请求)出现了,满足异步的网络请求,可以并行加载多个文件 ES6 modules,ES6 中自带对应的模块语法 input/exports,静态分析容易。但浏览器支持度不够,模块较少。为此 webpack 出现解决上述遇到的问题。

模块化的解决方案 - webpack

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。在 webpack 中所有的文件都将被当做模块使用,当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle 。举例:把你的项目当做一个整体,通过一个给定的主文件(如:mian.js), webpack 将这个文件开始找到你项目的所以依赖文件,使用 loaders 或者是 plugins 去处理它们,最后打包成一个(或者多个)浏览器可以识别的 JavaScript 文件。

webpack 的优缺点

先来看看 webpack 的 3 个优点:

  • 模块化打包:将 css,js,ts,sass 等统一转换为浏览器可以识别的模式,并按需(压缩或不压缩)打包。

  • webpack-plugin:webpack-plugin 是用来扩展 webpack 功能的插件,用来扩展 webpack 功能,并在整个构建过程中生效,执行相关任务。

  • 按需加载:代码中不需要的模块不被打进包里,或者按需加载。这是传统的流程构建工具,如 Gulp、Grunt 等所没办法实现的。

也不能忽视它的下列缺点:

  • 传统技术开发的复杂项目不适用:一些比如 jquery,requirejs,seajs 等脚本模块化开发的复杂项目项目,由于打包需求不稳定,webpack 维护成本极高。

  • 侵入性较强:使用 webpack 的项目,某些高级语法特性需要依赖独特语法实现,在一定程度上属于面向 webpack 开发,需要一定的学习成本。

  • 兼容性问题:webpack 一向是面对最新标准,自身的很多特性需要 polyfill 才能向下兼容,甚至有些特性最新浏览器还没有原生兼容, 在做开发时候需要注意。

webpack 的构建流程

Webpack 的构建流程是一种事件流机制。整个构建流程可以看成是一个流水线,每个环节负责单一的任务,处理完将进入下一个环节。

Webpack 会在每个环节上发布事件,供内置的和自定义的插件有机会干预 Webpack 的构建过程,控制 Webpack 的构建结果

初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数。

开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译。 确定入口:根据配置中的 entry 找出所有的入口文件。

编译模块:从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。

完成模块编译:在经过第 4 步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系。

输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会。

输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。

熟悉了 webpack 基本的构建流程那下面我们就进行实践操作构建 vue 项目

webpack 构建vue项目

安装 webpack

使用版本:webpack5.x

新建 webpack-vue 项目,进入项目根目录,创建默认的 package.json

安装 webpack 和 webpack-cli:

  • webpack - 模块打包库

  • webpack-cli - 命令行工具

新建 src/main.js,里面随便写点 console.log('hello,webpack-vue')

result:

基础配置

新建一个 build 文件夹,新建一个 vue.config.js

Entry

入口文件,webpack会首先从这里开始编译

Output

定义了打包后输出的位置,以及对应的文件名。[name]是一个占位符

result:

plugins

当我们构建项目时生成了 main.js 之后,需要一个 HTML 页面去展示,然后再 HTML 引入 JavaScript,当我们配置打包输出的 bundle 文件都配置了随机 hash 值,每次手动插入和下一次更新就特麻烦,最好方法是每次构建完成后自动将新的bundle 打包到 HTML 中并删除上一次旧的 bunble,所以我们需要 html-webpack-plugin 、clean-webpack-plugin 插件来帮我们自动引入和删除历史 bundle 文件

根目录新建一个 public/index.html 默认模板

配置 vue.config.js

result:

loaders

webpack 识别 css、sass 安装 loader,并将解析后的 css 插入到 index.html 里面的 style

result:

识别压缩图片、字体

webpack 识别图片、视频、字体、减少图片字体等打包的大小。我们可以使用 url-loader 将少于指定大小的文件转换为 base64,使用 file-loader 将大于指定大小的文件移动到指定的位置

Babel

Babel 是一个 JavaScript 编译器,能将 ES6 + 代码转为 ES5 代码,让你使用最新的语言特性而不用担心兼容性问题,

在 Babel 执行编译的过程中,会从项目根目录下的配置文件读取配置。在根目录下创建Babel的配置文件 .babelrc

兼容 vue

  • vue-loader

  • vue-template-compiler

  • vue-style-loader

src文件夹内新建一个APP.vue,内容自定义

热更新 HMR

配置 package.json

package.json:"dev":"webpack serve --config build/vue.config.js"

result:

推荐阅读

go-zero:开箱即用的微服务框架

实操笔记:为 NSQ 配置监控服务的心路历程

© 著作权归作者所有
这个作品真棒,我要支持一下!
又拍云 www.upyun.com(加速在线业务,让连接触手可达 ) 又拍云技术专栏将用全干货的形态,为互联...
0条评论
top Created with Sketch.