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

待我称王封你为后i 2022-05-28 00:25 377阅读 0赞

我们首先知道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;

![70][]

打包的过程是,我们先找到run1.js 文件，然后发现run1.js文件使用了 run2.js文件，那么就把这两个合并到一起

形成一个bundle.js,一开始可以这么简单的认为；  当然了，如果 run2.js 还依赖其他的  js 文件，那么就继续合并，

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

[70]: /images/20220528/52cb2e0935964f1aa6a93ae1f3da2aff.png

发表评论取消回复

表情：

评论列表（有 0 条评论，377人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack 打包html文件

webpack 打包html文件 `webpack.config.js`配置文件内容为： / loader: 1. 下载 2. 使用（配置）

一时失言乱红尘/ 2023年01月09日 03:43/ 0 赞/ 162 阅读

相关 Webpack打包

1、什么是Webpack WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sc

爱被打了一巴掌/ 2022年07月12日 09:54/ 0 赞/ 279 阅读

相关 webpack入门（四）

什么是loader loaders是你用在app源码上的转换元件。他们是用node.js运行的，把源文件作为参数，返回新的资源的函数。例如，你可以用loaders

拼搏现实的明天。/ 2022年06月17日 05:27/ 0 赞/ 147 阅读

相关 webpack入门（六）：webpack 打包 css文件

上一篇，我们说了使用webpack.config.js 来设置webpack，而且之前我们也了解了如何打包 js 文件，现在我们看看如何打包 .css文件：老规矩，一步

朴灿烈づ我的快乐病毒、/ 2022年05月28日 00:39/ 0 赞/ 277 阅读

相关 webpack入门（五）：webpack.config.js

有的同学可能在学习webpack的时候看到项目目录里会有webpack.config.js 文件，那么，这个文件是干嘛的呢？在上一篇中，我们学会了如何打包 j

缺乏、安全感/ 2022年05月28日 00:27/ 0 赞/ 166 阅读

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

我们首先知道webpack是处理 js 的工具，那么就不能处理 css 等其它文件了么？不是的，webpack可以通过 loader 处理很多类型的文件；我们

待我称王封你为后i/ 2022年05月28日 00:25/ 0 赞/ 378 阅读

相关 webpack4打包多个js文件

默认文件目录： ![70][] 1.多个js文件不合并打包(分别打包) 配置文件./conf/webpack.dev.js const path = requi

谁借莪１个温暖的怀抱￠/ 2022年05月19日 03:09/ 0 赞/ 205 阅读

相关 webpack打包文件过程

webpack打包 1)安装webpack $ npm install webpack webpack-cli --save-dev 2)添加配置文件 we

快来打我*/ 2022年05月08日 06:14/ 0 赞/ 256 阅读

相关四、webpack打包工具

webpack打包工具 Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块

ゞ浴缸里的玫瑰/ 2022年04月10日 02:21/ 0 赞/ 272 阅读

相关 WebPack打包

一、用webpack打包新建一个文件夹 webpack-demo 1. 初始化 npm 执行命令 $ npm init （只生成一个package.json文件） !

一时失言乱红尘/ 2021年11月16日 23:40/ 0 赞/ 535 阅读