webpack安装

2022-05-28 17:40:25 浏览数 (1)

webpack安装

安装webpack首先需要安装Node.js,Node.js自带了软件包管理工具npm

查看自己的node版本:

全局安装webpack(这里我先指定版本号3.6.0,因为vue cli2依赖该版本)

局部安装webpack(后续才需要)

–save-dev`是开发时依赖,项目打包后不需要继续使用的。

为什么全局安装后,还需要局部安装呢?

在终端直接执行webpack命令,使用的全局安装的webpack

当在package.json中定义了scripts时,其中包含了webpack命令,那么使用的是局部webpack

Webpack 起步

准备工作

我们创建如下文件和文件夹:

文件和文件夹解析:

dist文件夹:用于存放之后打包的文件

src文件夹:用于存放我们写的源文件

main.js:项目的入口文件。具体内容查看下面详情。

mathUtils.js:定义了一些数学工具函数,可以在其他地方引用,并且使用。具体内容查看下面的详情。

index.html:浏览器打开展示的首页html

package.json:通过npm init生成的,npm包管理的文件(暂时没有用上,后面才会用上)

mathUtils.js文件中的代码:

main.js文件中的代码:

js文件的打包

现在的js文件中使用了模块化的方式进行开发,他们可以直接使用吗?不可以。

因为如果直接在index.html引入这两个js文件,浏览器并不识别其中的模块化代码。

另外,在真实项目中当有许多这样的js文件时,我们一个个引用非常麻烦,并且后期非常不方便对它们进行管理。

我们应该怎么做呢?使用webpack工具,对多个js文件进行打包。

我们知道,webpack就是一个模块化的打包工具,所以它支持我们代码中写模块化,可以对模块化的代码进行处理。(如何处理的,待会儿在原理中,我会讲解)

另外,如果在处理完所有模块之间的关系后,将多个js打包到一个js文件中,引入时就变得非常方便了。

OK,如何打包呢?使用webpack的指令即可

使用打包后的文件

打包后会在dist文件下,生成一个bundle.js文件

文件内容有些复杂,这里暂时先不看,后续再进行分析。

bundle.js文件,是webpack处理了项目直接文件依赖后生成的一个js文件,我们只需要将这个js文件在index.html中引入即可

0 人点赞