人的影响短暂而微弱,书的影响则广泛而深远--普希金
从今日开始,小编将每日分享各类技术的教程,为了保证质量,所以决定一天一篇,专栏分为python,webpack,JavaScript,更新哪个栏目随机,但绝对会保证每日更新哒!每日的文章最下方都会为您提供本文章常用的面试题知识点,并会在同专栏发布时公布标准答案哦.
webpack图标一.开篇词
首先让我们提出下面几个问题:
1.什么是模块化开发
2.为什么是Webpack
3.Webpack中的配置有哪些,分别可以帮我们解决什么问题
4.这些概念在Webpack内核实现和原理上是怎么实现的
5.除了打包,我们还可以使用Webpack做什么
本课程分为三大部分:Webpack开发配置/Webpack内核原理/和工程化实践
学习一个新知识点,一定要搞明白是什么?为什么?可以做什么?
以下是小编为您公布的问题答案:
模块化
模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干个模块的过程,有多种属性,分别反应其内部特性
前端模块化一般指的是JavaScript的模块,常见的是Nodejs的NPM包
模块化的规范:ComminJS/AMD/ES6Module规范,还有CMD/UMD等
CommonJS是Nodejs广泛使用的一套模块化规范,是一种同步加载模块依赖的方式
AMD:是js模块加载库RequireJS提出并且完善的一套模块化规范,AMD是一条异步加载模块依赖的方式
ES6Module:ES6推出的一套模块化规范
CMD:国产库SeaJS提出来的一套模块化规范
UMD:兼容CommonJS和AMD一套规范
工程化
Webpack从一套解决JavaScript模块化依赖打包开始,利用强大的插件机制,逐渐解决前端资源依赖管理问题,衣服社区力量逐渐进化成一套前端工程化解决方案
什么是Webpack?
一个现代JavaScript应用程序的静态模块打包器
在Webpack处理应用程序时,它会在内部构建一个依赖图,用于映射到项目需要的每个模块,然后将所有这些依赖生成到一个或多个bundle
Webpack是从入口文件开始,经过模块依赖加载-分析-打包三个流程完成项目的构建
Webpack还可以解决传统构建工具解决的问题:
1.模块化打包:一切皆模块,js是模块,css等也是模块
2.语法糖转换:比如ES6转ES5/TS
3.预处理编译:比如less/sass等
4.项目优化:比如压缩/CDN
5.解决方案封装:通过强大的Loader和插件机制,可以完成解决方案的封装,比如PWA
6.流程对接:比如测试流程,语法检测等
面试题:
1.Webpack与Grunt/Gulp这类打包工具有什么不同?
请在评论区写下您的答案与网友们一起交流吧,文章中我们会公布此问题的答案.
此webpack教程参考了慕课网的相关知识并结合了自己的相关观点,特在此说明
如果您有任何技术上的问题或关于某方面技术的建议请在文章下方留言,小编看到后会第一时间与您一起交流的哦,当然了,如果觉得此文章写的好也请点赞或转发,三克油!