一. webpack是什么
在js文件中我们用import引入各种模块的时候，浏览器是不会识别的，我们可以用webpack把这些模块打包到一块再进行运行，直白的说webpack就是模块打包工具
二. 搭建webpack环境
第一步：安装node.js
- 傻瓜式安装；
- LTS表示稳定版本；
- 安装node的时候连同npm也安装了；
- 安装完成后我们可以在命令行中输入 node -v 回车查看node的版本号，成功输出版本号表示安装成功；
- 在命令行中输入npm -v回车查看npm的版本号
第二步：创建node项目
- 命令行输入mkdir webpack-demo 回车，创建一个demo文件夹
- 命令行输入cd webpack-demo 回车，进入该文件夹
- 命令行输入 npm init回车，进行项目初始化，一路回车就可以，或者输入npm init -y直接生成默认的配置，不用再一路回车了。完成后会在这个项目的根目录中生成package.json文件，描述node项目包的一些信息。
- 我们可以在package.json文件中添加"private": true属性，表示这个项目是我们私有的，不会被发布到npm管理器上
- 把package.json文件中的"main":"index.js"对应的配置项去掉，因为我们这个项目不会被外部引用，我们只是自己来用，没必要向外部暴露j一个js文件
- “scripts”:标签中的东西我们也可以都去掉
- “license”:"MIT"表示开源
三. 安装webpack
总共有两种方式
第一种方式：全局安装webpack（不推荐使用）
不推荐的理由：防止多个项目所依赖的webpack的版本不同
- 命令行中输入npm install webpack webpack-cli -g回车进行安装
第二种方式：在项目中安装webpack
- 在命令行中输入 npm uninstall webpack webpack-cli -g卸载掉全局安装的webpack
- 在命令行中进入需要安装webpack的项目文件夹，例如webpack-demo
- 在项目目录的命令行中运行npm install webpack webpack-cli --save-dev,
或者npm install webpack webpack-cli -D - 安装完成后运行webpack -v 我们会发现该命令不能运行，这是因为运行webpack命令的时候，node回去全局的模块目录中去找webpack。但是我们在全局并没有安装webpack，而是安装在项目内，所以是找不到webpack这个命令的。
但是没关系，node提供了一个npx命令，我们可以通过npx webpack -v来查看webpack的版本。
npx命令会帮助我们到当前项目的node模块目录下找webpack命令 - 如果我们还有其他项目用的是webpack的其他版本，那就在该项目中安装指定的版本就好了
步骤：
a.mkdir webpack-demo2
b. cd webpack-demo
c. npm init -y 项目初始化生成package.json文件并对其进行修改，添加私有属性，删除不需要的属性
d.安装webpack npm install [email protected] webpack-cli -D
f.运行npx webpack -v 查看是否安装成功 - 当我们将创建的项目上传到git仓库的时候，是不会把node模块这个文件夹上传上去的。
所以当上传后，我们重新克隆项目下来的时候是没有node模块这个文件夹的。我们克隆完该项目后，可以在命令行中进入该项目的文件夹，然后运行npm install这样就把所有的依赖包下载下来了
四. webpack的配置文件
步骤：
1.在项目的根目录中创建webpack.config.js文件
2.编写webpack.config.js文件
const path = require('path');
module.exports = {
mode: 'production',
//项目要做打包，从哪一个文件开始打包
entry: './src/index.js',
//打包文件放到哪里
output: {
//打包后的文件名字为bundle.js
filename: 'bundle.js',
//打包的文件放到bundle文件夹下，后面跟绝对路径，我们得引入node的一个核心模块path
//__dirname指的是当前目录下的路径(dirname前是两个下划线)
path: path.resolve(__dirname, 'dist')
}
}
3.编写完成后，运行npx webpack命令进行打包
补充：如果我们不想让webpack的配置文件名为webpack.config.js，而是自定义的文件名，如config.js,我们可以在命令中运行npx webpack --config config.js意思就是webpack你给我打包时以config.js为配置文件
五. 项目结构优化
一般我们会把源代码放到src目录中
在项目根目录下创建src目录，把inex.js文件放到src目录中，注意别忘记修改webpack.config.js文件的入口文件路径
六. 简化我们的打包命令
简化我们的打包命令，不再使用npm webpack
我们需要修改package.json文件，在"script"标签配置项中添加配置命令；
“build”:"webpack"这样我们在命令行中运行npm run build就可以打包了；
这里的webpack命令会先到工程下的node模块中找webpack命令，所以不要担心没有全局安装webpack
七. webpack-cli的作用
使得我们命令行中正常使用webpack命令，如果不安装的话，我们就没法在命令行中运行webpack或者npx webpack命令
八. webpack 打包知识点
在运行npm run build成功后命令行输出的信息的各个含义
- Hash 代表本次打包对应的唯一的一个hash值
- Version 表示我们这次打包使用的webpack的版本号
- Time 当前的这个包整体的打包耗时
- Asset 对应打包出来的文件
- Size 打包的文件的大小
- Chunks 每个js文件对应的id
- Chunk names 每个js文件对应的名字
- Entrypoint 表示我们的入口文件
- WARNING in configuration 警告信息
The ‘mode’ option has not been set 告诉我们没有设置打包模式，我们可以在webpack.config.js文件中添加配置项mode：“production”(production为默认模式，打包后的文件为压缩格式的；如果我们不想被压缩可以将mode设置为development)