本章在上章内容的基础上简单扩展一下,先说下模块的规范,有哪些标准,然后谈下webpack的loader怎么用以及使用webpack中的babel-loader简单打包一下。
git仓库:webpack-demo
webpack
是一个模块打包工具,何为模块?一个js文件、css等等都可以称之为模块,ok,假设现在我有a.js
、b.js
、c.js
等等,而且它们之间还要相互引用,咋整?这时候就需要有一套标准来定义该怎么引用啊,它们之间是个啥依赖关系啊之类的,那么大概就有这么几种模块化规范:
ES6Module
–就是import、export这类的,我们对这个应该很熟。CommonJs
–就是require这种,node里面使用的,是node的模块规范。AMD
–是Require.js在推广的过程中对模块定义的规范化产出;CMD
–是淘宝Sea.js在推广的过程中对模块定义的规范化产出;@import
声明也是一种模块引入规范,大概就这么些。新建几个模块其实就是新建几个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();
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>
头部块、主体内容、尾部块
内容了。babel
也没有安装,为什么能把es6
的这种语法成功打包?
webpack
认识它。不仅webpack
认识它,而且还在打包的时候对import
和export
做了转译,这点我们从打包后的main.js源码中就能看出来。import
和export
,但是对其它的es6语法就不怎么认识了,再者像chrome
这种优秀的浏览器虽然与时俱进的兼容了es6
的语法,但是并不是所有的浏览器都像它这么优秀,所以我们还需要将其转为es5
这种大众都认识的js语法,所以babel
就上场了。loaders
这个概念,然后使用常用的bable-loader
将本章内容中的es6语法转换为es5,新知识每天不要学多了,先这样。参考链接