webpack 使用指南-绪论

Nosee 发布于2019-08-21 17:38 / 364人阅读

摘要：在讲解之前先回顾一下笔者在项目开发中的工作流变化时代此时工作流大致为结合插件处理视图处理样式等库此时由于依赖少手动引入各种标签结合调试界面时代利用指令服务控制器将逻辑拆分为多个文件利用编译会将分为全局样式和组件样式下载各种依赖此时任需要手动

在讲解 webpack 之前先回顾一下笔者在项目开发中的工作流变化.

jquery 时代

此时工作流大致为

jquery 结合插件处理视图

bootstap 处理样式

lodash, underscore 等库

此时由于依赖少,手动引入各种标签,结合 phpstorm,chrome 调试界面

angularjs1.x 时代

利用指令,服务,控制器将逻辑拆分为多个 js 文件

利用 sass 编译 css,会将 scss 分为全局样式和组件样式.

bower 下载各种依赖

此时任需要手动管理各种依赖.少做的事情包括

css 采用 sass 集中编译压缩为一个文件

存在的问题.

需要手动载入多个 js 文件

需要管理不同 js 文件的依赖关系

angularjs1.x + node 进化版

grunt 处理任务工作流(中途也用过 gulp 原理差不多),核心任务包括

watch 文件变化

将 sass 的编译工作放入其中

将分离的 js 文件打包合,混淆放入其中

利用 browserify 管理 js 的依赖

selenium 测试前端界面层

karma + mocha 测试接口逻辑层

npm script + shell 封装一些常用操作例如数据库导入,运行测试等

此时任需要手动加载资源,但是此时只用加载编译后的单个文件即可,少做的事情包括

js 依赖引入减少

工作流半自动化

存在的问题

任需手动引入各种依赖

vue 时代

使用 vue-cli 一键初始化项目

编写 vue 模板,修改路由文件

使用 vuex,vue-source 等工具处理业务逻辑

可以看到整个项目的开发从原始的资源引用模式.
进化到基于后端 node 的编译开发时代.

webpack 作为一个工具完成了那些事情呢?

整合了从项目的资源引入到编译打包的一系列工作

基于此某种程度上可以讲 webpack 理解为现代前端开发中的编译器(原谅我的概念定义)

将各种不同的前端资源编译打包为一个可以在浏览器端运行的程序

从这个角度再看一下 webpack 的核心概念

entry 入口文件.类似编译主文件,基于此解析依赖关系

output 输出文件,编译结果

loaders 加载器模块,用来解析编译不同的文件类型,例如将 sass 转为 css,typescript 编译为 js 等

plugins 插件模块,在编译不同阶段执行任务,例如压缩混淆输出,启动 http 服务等

可以看到 webpack 将原来资源引入,编译,文件监听等各种任务,
分散到基于 loaders,plugins 的模块体系中完成.

在工作模式上 webpack 和 grunt,gulp 差不多.都是基于插件体系.
但是注意如下区别

gulp,gurnt 更侧重解决多个任务的集成.之所以用来编译是基于你的配置的

webpack 更侧重于解决资源的引用,编译打包,同时结合插件做更多的事情.

总结 webpack 的学习重点如下

核心配置选项的学习

各种 loaders 模块的配置学习

实际上很多时候只需利用 npm 安装该 loaders 再引入即可

各种 plugins 模块的配置学习

学习 webpack 之前你需要那些基础呢?

对前端的编译工作流有基本认识,知道为什么需要编译及它的价值?最好使用过
browserify,grunt,gulp 等类似工具.

对 node 有基础的学习,例如告诉我 npm 是如何查找依赖的?

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89810.html

数据结构与算法—绪论

摘要：数据结构是指相互之间存在一种或多种特定关系的数据元素的集合。一个数据元素由若干数据项构成可认为是一个对象或者是数据库的一条记录。抽象数据类型抽象数据类型是一个实现包括储存数据元素的存储结构以及实现基本操作的算法。前言重要性数据结构与算法是程序员内功体现的重要标准之一，而数据结构的也应用在各个方面，更有程序=数据结构+算法这个等式存在。各个中间件开发者，架构师。他们都在努力的优化中...

Tecode 2019-08-19 10:27 评论0 收藏0
《设计模式》1.绪论

摘要：设计模式是一套被反复使用的多数人知晓的经过分类编目的代码设计经验的总结。使用设计模式是为了重用代码让代码更容易被他人理解保证代码可靠性。由此可见，其实设计模式就是从大型软件架构出发便于升级和维护的软件设计思想，它强调降低依赖，降低耦合。点击进入我的博客 1.1 设计模式概述什么是设计模式设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。设计模式是一套被反复使用的、...

bovenson 2019-08-16 13:52 评论0 收藏0
Python入门学习笔记汇总

摘要：导语本文章汇总了本人在学习基础之绪论篇数据结构篇函数篇面向对象篇控制流程篇和元编程篇学习笔记的链接，打算入门的朋友们可以按需查看并交流。导语：本文章汇总了本人在学习Python基础之绪论篇、数据结构篇、函数篇、面向对象篇、控制流程篇和元编程篇学习笔记的链接，打算入门Python的朋友们可以按需查看并交流。第一部分：绪论篇 1、Python数据模型第二部分：数据结构篇 2、序列构成...

U2FsdGVkX1x 2019-07-30 16:04 评论0 收藏0