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:
webpack 从 0 到 1 构建 vue的更多相关文章
- 《前端之路》之 webpack 4.0+ 的应用构建
目录 一.版本 二.webpack 的主体概念 2-1.入口 2-1-1.单页面入口 2-1-2.多页面应用的入口 2-2.输出 2-3.loader 2-4.plugins 三.如何使用 3-1 关 ...
- webpack构建vue项目(配置篇)
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...
- 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面
一.项目简介 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面,实现了微信聊天.搜索.点赞.通讯录(快速导航).个人中心.模拟对话.朋友圈.设置等功能. 二. ...
- Webpack+vue2.0如何注册全局组件 (01)
Part 1, 问题: webpack + vue2.0框架中,如何在入口js中注册组件? 就是在一个月以前,匆匆闯入vuejs这个社群,基本了解了vuejs的一些基础特性和语法.笔者兴致勃勃地开始想 ...
- vue,一路走来(1)--构建vue项目
2016年12月--2017年5月,接触前端框架vue,一路走来,觉得有必要把遇到的问题记录下来. 那时,vux用的是1.0的vue,然而vue2.0已经出来了,于是我结合了mint-ui一起来做项目 ...
- vue-cli快速构建Vue项目
vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm i ...
- vue-cli快速构建vue项目模板
vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 1.使用npm安装vue-cli 需要先装好vue 和 webpack(前提是已经安装了nodejs,否则连npm都用不了 ...
- 自动化工具构建vue项目
其实之前对vue的话也有过一段时间的学习,博客园也是写了5篇vue的学习笔记.但是一直是通过CDN的方式在html文件头部引入vue.js,然后实例化vue对象绑定Dom,写组件写方法.就算是在实际项 ...
- webpack 4.0 版本的简单使用
webpack 4.0 学习指南 最近前端又要变天了,vue作者推出了vue-cli 3版本,并且里面使用了webpack 4. 但是webpack 3 和webpack 4 二者的使用方式完全不一样 ...
- 从无到有构建vue实战项目(四)
六.webpack的安装和配置 为了快速构建vue项目,webpack是一个必不可少的工具,我们先来安装它,附上官网地址:https://www.webpackjs.com/ 要安装最新版本或特定版本 ...
随机推荐
- 用最清爽的方式开发dotNet
用最清爽的方式开发dotNet 不管是官方自带模板还是其他开源搞的,总是一来一大堆,如果你也嫌弃这些过于臃肿,不如看看我这个方式 前提 假设我要做一个简单的api 方式 想到清爽,那肯定是简单方便,脑 ...
- 开发必备工具、插件【ME】
工欲善其事,必先利其器,记录自己开发中常用的工具.插件: 慢慢更新... 一.必备 1.Visual Studio.IntelliJ IDEA .Sublime Text 3 2.TeamViewe ...
- 循环返回结果结果集(connect 函数使用)
--示例: SELECT 0 + ROWNUM sonID FROM DUAL /*区间范围*/ CONNECT BY ROWNUM <= 20;
- LeetCode 503:下一个更大的元素|| (单调栈 or 线段树)
解题思路: 1.单调栈:因为是循环数组,因此把数组复制三遍,ans 数组复制为2倍长,维护一个单调非递增的栈,栈保存的元素是元组(a[i] , i ),如果后面的值有比栈顶元素的值大,栈顶元素出栈,更 ...
- Codeforces Round #426 (Div. 2) problem B
B. The Festive Evening time limit per test 1 second memory limit per test 256 megabytes input standa ...
- Scrapy框架爬取HTTP/2网站
scrapy本身是自带支持HTTP2的爬取: https://docs.scrapy.org/en/latest/topics/settings.html?highlight=H2DownloadHa ...
- java注释、变量、数据类型和运算符
注释 单行注释:// 多行注释:/*开头,*/结尾 JavaDoc注释:/**开头,*/结尾 快捷键:ctrl + ? 变量 第一步:声明变量.即根据数据类型在内存分配空间. 第二步:赋值.即将数据的 ...
- hutool的常用方法
https://www.hutool.cn/docs/#/ 官方文档 Hutool 是一个 Java 开发工具包,提供了丰富实用的工具类,包括字符串处理.日期处理.文件操作.加密解密.网络请求等等.以 ...
- python -m http.server在本地启动简单HTTP服务器的命令
1.python -m http.server 命令 python -m http.server 是一个用于在本地启动简单 HTTP 服务器的命令.这个命令会在当前工作目录启动一个基本的 HTTP ...
- 云图说 | 图解制品仓库服务CodeArts Artifact
本文分享自华为云社区<[云图说]第277期 图解制品仓库CodeArts Artifact>,作者:阅识风云. 制品仓库服务CodeArts Artifact用于存放源码编译生成的.可运行 ...