本章在上章内容的基础上简单扩展一下, 先说下模块的规范, 有哪些标准, 然后谈下 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, 其他
参考链接
webpack 官网
webpack 从 0 到 1 系列文章
webpack 官网关于 module 的解释
来源: http://www.jianshu.com/p/b99b060b293d