webpack入门（四）：webpack打包 js 文件

最新推荐文章于 2024-07-16 16:20:26 发布

原创最新推荐文章于 2024-07-16 16:20:26 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #打包js #依赖

webpack 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用 Webpack 处理多个具有依赖关系的 JavaScript 文件，并将其打包为一个 bundle.js 文件。通过实例演示了从安装 Webpack 到创建项目、编写代码及最终打包的全过程。

我们首先知道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 文件，那么就继续合并，

这就是整个过程的宏观理解；