webpack概述

网页中引入的静态资源多了以后有什么问题

1. 加载速度慢，因为要发送很多的二次请求
2. 要处理错综复杂的依赖关系

如何解决上述两个问题

1. 合并、压缩、精灵图、图片Base64编码
2. 可以使用之前resquirejs，也可以使用webpack，解决各种包之间的依赖关系

什么是webpack

webpack是前端的一个项目构建工具，它是基于Node.js开发的一个前端工具

如何完美实现上述的解决方案

1. 使用gulp，是基于task任务的
2. 使用webpack，是基于整个项目构建的
3. 借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩

安装

1. npm install webpack -g 全局安装这样就能在全局使用webpack的命令
2. webpack的官网
3. 在项目跟目录中运行npm install webpack --save安装到项目依赖中

配置文件

webpack.config.js
const path = require('path');
module.exports = {
	mode:'development',
	entry:path.join(__dirname,'./src/main.js'),
	output:{
		path:path.join(__dirname,'./dist/'),
		filename:'bundle.js'
	}
};

当我们在控制台输入 webpack 命令执行的时候，webpack 做了以下几步

1. 首先，webpack 发现，我们并没有通过命令的形式，给它指定出口和入口
2. webpack 就会去项目的根目录中，查找一个叫做 webpack.config.js 的配置文件
3. 当找到配置文件后，webpack 会去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中，导出的配置对象
4. 当webpack 拿到配置对象后，就拿到了配置对象中指定的入口和出口，然后进行打包处理