我们首先知道webpack是处理 js 的工具,那么就不能处理 css 等其它文件了么?
不是的,webpack可以通过 loader 处理很多类型的文件;
我们之前简单的打包过一个js文件,这一次我们看看webpack是如何打包有多个依赖关系的 js 文件的;
具体过程:
第一步:全局安装webpack,使用 npm install webpack@3.9.0 -g 下载完成即可;
第二步:我们新建一个项目,随便起个名字,这里假设是webpack_temp;
第三步:我们创建一个index.html文件,一个run1.js文件,一个run2.js文件,文件内容:
index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
run1.js
document.write(require("./run2.js"));
run2.js
module.exports = " 我是第二个js 文件.";
第四步:接下来我们就可以打包了,也就是将run1.js 和run2.js 两个文件打包成一个 bundle.js 文件,然后,我们在
index.html 文件中使用这个 bundle.js;
打包的过程是,我们先找到run1.js 文件,然后发现run1.js文件使用了 run2.js文件,那么就把这两个合并到一起
形成一个bundle.js,一开始可以这么简单的认为; 当然了,如果 run2.js 还依赖其他的 js 文件,那么就继续合并,
这就是整个过程的宏观理解;