前端领域框架百花齐放,各种优秀框架出现(react,Vue,ag)等等框架。为了方便开发者快速开发, 开发对应的 cli 脚手架,来提高产出。然而初中级的前端工程师对项目里的 webpack 封装和配置了解的不清楚,就容易导致出问题不知如何解决,甚至不会通过 webpack 去扩展新功能,对 webpack + vue 项目究竟是怎样搭建起来的感到一脸困惑,下面我们就来解决这个问题,揭开 webpack 构建 vue 的面纱。
酷炫动画的页面,高度复杂的页面功能,页面内容支持预加载(图片、骨架屏) ,这些高要求导致了项目的增加更多的代码。代码的增多,使得由来代码需要被组织的需求,由此产生了模块化。
模块化的发展历程
传统的 <script> 标签,一个标签加载一个 js 文件。缺点就是全局变量太多,容易出现冲突,另外依赖顺序很重要,太多 js 不好管理 。后面出现了 node.js,有了 CommonJS 规范(同步的 require 请求),即一个模块是一个文件,想用谁直接 require 谁,想被谁用,就 module.exports 导出去。
虽然服务端使用起来方便,但是浏览器通过网络请求获取文件是异步的,所以出现了矛盾。为了解决 CommonJS 规范的缺陷,AMD 规范(异步的 require 请求)出现了,满足异步的网络请求,可以并行加载多个文件 ES6 modules,ES6 中自带对应的模块语法 input/exports,静态分析容易。但浏览器支持度不够,模块较少。为此 webpack 出现解决上述遇到的问题。
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。在 webpack 中所有的文件都将被当做模块使用,当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle 。举例:把你的项目当做一个整体,通过一个给定的主文件(如:mian.js), webpack 将这个文件开始找到你项目的所以依赖文件,使用 loaders 或者是 plugins 去处理它们,最后打包成一个(或者多个)浏览器可以识别的 JavaScript 文件。
先来看看 webpack 的 3 个优点:
也不能忽视它的下列缺点:
Webpack 的构建流程是一种事件流机制。整个构建流程可以看成是一个流水线,每个环节负责单一的任务,处理完将进入下一个环节。
Webpack 会在每个环节上发布事件,供内置的和自定义的插件有机会干预 Webpack 的构建过程,控制 Webpack 的构建结果
初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数。
开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译。 确定入口:根据配置中的 entry 找出所有的入口文件。
编译模块:从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。
完成模块编译:在经过第 4 步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系。
输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会。
输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。
熟悉了 webpack 基本的构建流程那下面我们就进行实践操作构建 vue 项目
安装 webpack
使用版本:webpack5.x
新建 webpack-vue 项目,进入项目根目录,创建默认的 package.json
安装 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
src文件夹内新建一个APP.vue,内容自定义
热更新 HMR
配置 package.json
package.json:"dev":"webpack serve --config build/vue.config.js"
result:
复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
注释1:上图整个大背景是这个网页的全部尺寸,中间的小框才是浏览器中的可见尺寸...
1.HTML5的内容类型 内容类型 描述 内嵌 向文档中添加其他类型的内容,例如audio...
John Au-Yeung 来源:medium 译者:前端小智 有梦想,有干货,微信搜索 【大迁世...
先点赞再看,养成好习惯 前言 这两天在另一个社区看到了一个关于 Tomcat 的提问...
data URI scheme 允许我们使用内联(inline-code)的方式在网页中包含数据,可以...
简介: 企业上云多账号架构中,如何做到从上到下管理的同时,处理好员工的权限边...
解决方法如下: 第一种 使用iframe,但是目前使用iframe的人已经越来越少了,而...
Redis 官方在 2020 年 5 月正式推出 6.0 版本,提供很多振奋人心的新特性,所以...
content属性一般用于::before、::after伪元素中,用于呈现伪元素的内容。平时con...