webpack解析html中图片,10. vue之webpack打包详解

一、什么是webpack

webpack官网给出的定义是

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，

它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

如上图: 中间的蓝色块就是webpack. 他会将左边各种文件打包成右侧html能够解析的文件.

总结:

webpack是一个静态的打包模块.

这里涉及两个概念: 打包和模块

1. 什么是模块?

上一篇文章, 说了什么是模块化, 详见: https://www.cnblogs.com/ITPower/p/14466964.html

模块化有很多规范, commonJs规范, AMD规范, CMD规范, ES6规范等

在ES6之前, 要想使用模块化开发,就要借助其他的工具, 而且开发完成以后, 还需要处理各种依赖,并将其进行整合打包.

webpack可以让我们进行模块化开发, 他提供了平台, 并且会帮助我们处理各模块之间的依赖关系.

webpack最终会帮我们将js, css, 图片, json文件等打包为合适的格式, 以供浏览器使用.

在webpack中上述文件类型都可以被当做模块来使用.

2. 什么是打包?

就是将webpack中各种模块资源进行打包合并成一个或多个包. 并且在打包的过程中, 可以对资源进行处理, 如:压缩图片, 将scss转成css, 将ES6语法转成ES5等可以被html识别的文件类型.

二. webpack打包工具的安装

webpack打包工具依赖nodejs. nodejs环境依赖各种包, 这些包使用npm进行管理. npm是什么呢? npm就是用来管理node下的各种包的

接下来看看webpack如何安装?

第一步: 安装nodejs

在官网下载nodejs:https://nodejs.org/zh-cn/ 安装好以后可以查看nodejs的版本

node -v

我当前的版本是 v12.16.2

默认安装nodejs的时候, 就会自动安装npm, 所以, npm不用单独安装

第二步: 安装webpack

我使用的webpack版本是3.6.0, 因为我当前使用的vue的版本是2, vue2依赖的webpack版本是3.6.0

首先查看本机是否已经安装了webpack, 使用命令查询

webpack --version

如果没有安装, 则安装全局的webpack

npm install webpack@3.6.0 -g-g:表示的是global 全局的意思

webpack需要全局安装, 也需要局部安装.

我们在终端或者IDE的terminal中使用webpack都是使用的全局的webpack,当我们在项目下使用package.json scripts webpacks, 这时候使用的是局部安装的.

那什么是全局webpack ,什么是本地webpack呢?

我们通常都会安装两个webpack, 一个是全局的一个是本地的.

全局的指的是电脑上安装的webpack包, 所有项目都可以使用

本地webpack是指当前项目的webpack包. 通常全局webpack版本会比较高, 而我的项目是老项目, 使用的是老版本的

webpack打包的, 这时如果使用全局的webpack打包就会报错, 所以, 需要安装一个和项目匹配的本地的webpack包

在这里, 我们先值安装全局的, 后面使用到本地的了, 再来安装本地的webpack.

三. webpack的基本使用

webpack下通常包含两个文件夹， 一个是src， 一个是dist

src下都会有一个main.js, 作为主js文件.

dist存放打包后的文件

在webpack中,我们会使用两种类型的模板来定义: 分别是commonJs语法, 和ES6语法.

在main.js引用mathUtil.js, 使用commonjs语法

在main.js引用dataUtil.js, 使用ES6语法

下面, 我们创建一个mathUtil.js 和 dataUtil.js两个js文件, 分别使用commonJs语法和ES6语法来创建.

- 在main.js引用mathUtil.js, 使用commonJs语法

- 在main.js引用dataUtil.js, 使用ES6语法

项目结构如下:

1)  使用commonJs语法

第一步: 在mathUtil.js中export, 使用commonJs模块的写法 : module.exports ={add, sub}

function add(num1, num2) {return num1 +num2

}

function sub(num1, num2) {return num1 -num2

}//使用commonJs导出模块

module.exports={add, sub}

这里使用的是commonJs的语法导出方法

第二步: 在main.js中引用mathUtil.js中导出的变