01、webpack打包工具 -- 安装、配置

32 阅读4分钟

概念

它是一个现代的JavaScript应用的静态模块打包工具

webpack中模块化的概念

前端模块化

1、从模块化的概念 (vue栏目中) 已知,在ES5之前,若我们想进行模块化开发,就必须借助于其他的工具,让我们可以实现模块化开发

2、且在通过模块化开发完成了项目之后,还需要处理模块间的各种依赖,并要将其进行整合打包

3、而 webpack 其中的一个核心就是让我们可能进行模块化开发,并帮助我们处理模块间的依赖关系

4、不仅仅是js文件,我们的CSS、图片、json文件等等,在webpack中都可以被当作模块来使用

打包

1、打包就是将webpack中的各种资源模块进行打包合并为一个或者多个包(Bundle)

2、且在打包过程中,还能对资源进行处理、eg:压缩图片,将scss转为css;将ES6语法转为ES5语法;将TypeScript转为JavaScript等等

与 grunt/gulp的区别

grunt

核心

核心是task

可以配置一系列的task,且定义task要处理的事务,然后让grunt来依次执行这些task,且让整个流程自动化,所以grunt也被称为前端自动化任务管理工具

什么时候使用

1、工程模块依赖非常简单,甚至是没有用到模块化的概念

2、只需要进行简单的合并,压缩,就可以使用

3、若整个项目用了模块化管理,且相互依赖非常强,那么我们就使用的是 webpack

不同

1、grunt/gulp 更加强调的是前端流程的自动化 。模块化不是它的核心

2、webpack更加强调的是 模块化开发管理 。而文件压缩合并、预处理等功能,是它附带的功能

安装

概念

webpack为了可以正常运行,必须依赖node环境 , 而node环境为了可以正常的执行很多代码,必须其中包含各种依赖的包,而npm(node packages manager)工具就是为了管理这个包的

如何安装

1、安装webpack 首先要先安装node.js ,node.js自带了软件按包管理工具npm

(查看版本号) image.png

2、全局安装 webpack

image.png

(全局安装 : 表示哪里都可以使用 )

3、局部安装(之后学习)

基本使用

1、创建文件夹 image.png

src : 开发的文件
dist : 打包后的文件都放到dist中

2、创建文件

image.png

commonJS模块化写法

2.1、在mathUtils.js中(我们在js写的就是模块化代码了)

image.png

2.2、在main.js中

image.png

3、打开此文件夹下的终端

image.png

src下面的main.js文件用webpack打包,打包到 dist下的bundle.js文件

即使main.js文件中引入了其他文件,webpack都会去找到该文件 进行解析

4、dist文件夹中

image.png (此时该文件夹下中,就出现了bundle.js文件)

5、在index.html 中

image.png

(直接引入打包后的文件即可)

ES6模块化写法

1、info.js文件中

image.png

2、main.js中

image.png

3、重新打包

image.png

webpack配置

创建的文件 都是以 .config.js 结尾的

webpack.config.js

目的 : 打包的时候直接 输入 webpack即可打包

1、创建文件

image.png

2、配置文件

image.png

image.png

2.1、需要绝对路径,所以我们要使用node里面的路径包

image.png

2.2、使用node,那么我们就需要初始化node

image.png

image.png

3、配置绝对路径

image.png

node里面path包里面有 path.resolve() :它可以把前后两个路径进行相连

__dirname : 可以获得当前的绝对路径

4、打包

image.png

此时输入 webpack即可打包

5、使用node中进行打包

image.png

在package.json中给 webpack起别名

image.png

则我们使用 npm run build 也可以进行打包

打包时输入 webpack ,会首先到本地去找webpack

局部webpack

1、局部安装

--save-dev 是开发时依赖,项目打包后不需要继续使用 image.png

2、在package.json中

(开发阶段使用的放这里) image.png

(项目在打包后还想使用的放这里) image.png

3、安装后

本地文件夹中会出现node文件夹,里面是各种包 image.png

在终端里面 输入 webpack 时,就去找 全局的webpack

而 输入 npm run build 时,就是局部的