在开始之前，我们先来看以下Webpack官网首页的图片，并思考一下官网图片转达给我们的含义?

一.Webpack根基介绍 1.1 观点的引入

思考：在网页中，我们经常会引入哪些常见的静态资源

JS

.js .jsx .coffee .ts（TypeScript 类 C# 语言）

CSS

.css .less .sass .scss

Images

.jpg .png .gif .bmp .svg

字体文件（Fonts）

.svg .ttf .eot .woff .woff2

模板文件

.ejs .jade .vue【这是在webpack中界说组件的方法，保举这么用】

问题：网页中静态资源多了以后存在的问题

网页加载速度变慢，因为要多次反复的发送资源请求

要措置惩罚惩罚错综庞大的依赖关系

如何解决上述两个问题？

合并、压缩、精灵图、图片的Base64编码

可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的庞大依赖关系；

1.2 什么是Webpack

Webpack是一个前真个项目构建工具，它是基于node.js开发出来的一个前端工具

如何实现上述的2种解决方案？

使用Gulp， 是基于 task 任务的；

使用Webpack， 是基于整个项目进行构建的；

借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多成果。

按照官网的图片介绍webpack打包的过程

webpack官网

1.3 Webpack撑持的规范

Webpack撑持以下规范

CommonJS规范

//moduleA.js 导出 module.exports = function(){ //... } //moduleB.js 导入 var moduleA = require(‘./moduleA‘)

 

AMD规范（推崇依赖前置）

//moduleA.js 导入和导出 define([‘jquery‘,‘./math.js‘],function($,math){ //AMD是依赖前置，将文件的依赖通过数组的形式导入，然后看成函数的参数通报进函数使用 //通过return来实现对外接口 return helloWorld })

 

CMD规范（推崇就近依赖，需要用到的时候再去加载模块）

标准语法：define（id？，deps?，factory）

一个文件一个模块，所以经常用文件名作为模块id

CMD推崇依赖就近，所以一般不在define的参数中写依赖，在factory中写

factory是一个函数，该函数拥有三个参数 function（require，exports，module）

require：一个要领，接收模块标识，用来获取其它模块供给的接口

exports：一个东西，用来向外供给模块接口

module：一个东西，存储了与当前模块相关联的一些属性和要领

define(fcuntion(require,exports,module){ var $ = require(‘jquery.js‘) }) 复制代码

ES6规范

在ES6规范中，使用import和exports命令来导入和导出文件

//moduleA.js 导出 //...内容区 //导出函数(还可以导出东西以及任何你想导出的数据类型) exports.func = someFunc //moduleB.js 导入 import func from ‘./moduleA‘

 

掘金：AMD和CMD的区别

1.4 安置Webpack

运行 npm i webpack -g 全局安置Webpack，这样就能在全局使用Webpack命令

注意，如果是 webpack4.0以上的版本，需要全局安置 Webpack-cli

在项目根目录运行 npm i webpack --save-dev安置到项目依赖中

1.5 命令行的使用

检察Webpack版本信息

npm info webpack

 

安置指定版本的Webpack

npm install [email protected]版本号

 

卸载webpack

npm uninstall webpack webpack-cli -g

  二.Webpack根基使用 2.1 Webpack根基的使用方法-实例

方针：使用Webpack打包构建列表隔行变色案例

创建根基的目录布局

webpack-study

dist

src

js

css

images

index.html

main.js

在项目目录下面运行npm init初始化项目

使用 npm i jquery --save 安置jquery类库

创建main.js并书写各行变色的代码逻辑