2、webpack从0到1-模块化规范
2020/3/11 8:01:29
本文主要是介绍2、webpack从0到1-模块化规范,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
本章在上章内容的基础上简单扩展一下,先说下模块的规范,有哪些标准,然后谈下webpack的loader怎么用以及使用webpack中的babel-loader简单打包一下。
git仓库:webpack-demo
1、模块化规范
- 上章我们知道
webpack
是一个模块打包工具,何为模块?一个js文件、css等等都可以称之为模块,ok,假设现在我有a.js
、b.js
、c.js
等等,而且它们之间还要相互引用,咋整?这时候就需要有一套标准来定义该怎么引用啊,它们之间是个啥依赖关系啊之类的,那么大概就有这么几种模块化规范:ES6Module
–就是import、export这类的,我们对这个应该很熟。CommonJs
–就是require这种,node里面使用的,是node的模块规范。AMD
–是Require.js在推广的过程中对模块定义的规范化产出;CMD
–是淘宝Sea.js在推广的过程中对模块定义的规范化产出;
- 前面两种要好好了解,后面两种不用管了,反正也快要被淘汰了,了解下就行。还有css的
@import
声明也是一种模块引入规范,大概就这么些。
2、新建模块
-
新建几个模块其实就是新建几个js文件,我们复制一份上节chapter1的内容,改名为
chapter2
。 -
我们在
src
目录下新建几个js文件,并在其中用es6
的语法写一些内容并导出。
webpack-demo/chapter2 |- package.json |- index.html |- /src |- index.js + |- header.js + |- content.js + |- footer.js ...
header.js
内容:
export function createHeader() { const div = document.createElement("div"); div.innerText = "头部块"; document.body.appendChild(div); }
content.js
内容:
export function createContent() { const div = document.createElement("div"); div.innerText = "主体内容"; document.body.appendChild(div); }
footer.js
内容:
export function createFooter() { const div = document.createElement("div"); div.innerText = "尾部块"; document.body.appendChild(div); }
- 然后我们在
index.js
中引入这些模块,这样我们分模块的创建并引入了一些将要在页面上显示的内容了。
import { createHeader } from "./header"; import { createContent } from "./content"; import { createFooter } from "./footer"; createHeader(); createContent(); createFooter();
3、打包模块
- 接下来我们就是要用webpack打包罗,因为
package.json
和配置文件webpack.config.js
都是直接copy的上章chapter1的内容,所以我们直接输入命令打包。
$ npm run build
- 然后我们就可以看到打包后生成了的
dist
文件夹和该文件夹下的main.js
,同上章一样复制一份sr/index.html
文件到dist
文件夹下文件内容改为:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack从0到1</title> </head> <body> - <script src="./src/index.js"></script> + <script src="main.js"></script> </body> </html>
- 然后我们在浏览器中打开,就可以看到页面上显示的
头部块、主体内容、尾部块
内容了。
4、小结
- 首先有个疑问,我们什么也没有安装,连熟悉的
babel
也没有安装,为什么能把es6
的这种语法成功打包?- 很简单,因为
webpack
认识它。不仅webpack
认识它,而且还在打包的时候对import
和export
做了转译,这点我们从打包后的main.js源码中就能看出来。 - 所以我们能在chrome浏览器中正常的打开它并显示,再者,新版的chorme浏览器对es6语法也做了兼容。
- 很简单,因为
- 虽然webpack会认识
import
和export
,但是对其它的es6语法就不怎么认识了,再者像chrome
这种优秀的浏览器虽然与时俱进的兼容了es6
的语法,但是并不是所有的浏览器都像它这么优秀,所以我们还需要将其转为es5
这种大众都认识的js语法,所以babel
就上场了。 - ok,下章讲下webpack的
loaders
这个概念,然后使用常用的bable-loader
将本章内容中的es6语法转换为es5,新知识每天不要学多了,先这样。
5、其他
参考链接
点击查看更多内容
这篇关于2、webpack从0到1-模块化规范的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04el-table 开启定时器下,表格的选中状态会消失是什么原因-icode9专业技术文章分享
- 2024-10-03如何安装和初始化飞牛私有云 fnOS?-icode9专业技术文章分享
- 2024-10-03如何安装 App 并连接到飞牛 NAS?-icode9专业技术文章分享
- 2024-10-03如何安装飞牛 TV 并连接到影视服务器?-icode9专业技术文章分享
- 2024-10-03如何在PVE和ESXI上安装飞牛私有云 fnOS?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS安装系统异常情况处理-icode9专业技术文章分享
- 2024-10-03飞牛NAS如何创建存储空间?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS硬盘会自动休眠吗?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS如何安装飞牛影视和创建媒体库?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS如何为家人朋友开通影视账号?-icode9专业技术文章分享