webpack入门(四):webpack打包 js 文件

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

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


 

            


         


  

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值