1、安装node.js
https://nodejs.org/zh-cn/
https://nodejs.org/dist/v14.18.1/node-v14.18.1-x64.msi // 长期维护版 windows
https://nodejs.org/dist/v14.18.1/node-v14.18.1-linux-x64.tar.xz // 长期维护版 linux
2、创建项目目录
mkdir webpack-demo
cd webpack-demo
3、初始化
npm init -y
此时文件夹里会多出一个文件 package.json
{ "name": "webpack-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
4、安装webpack和webpack-cli
npm install webpack webpack-cli --save-dev
// 在目录webpack-demo的本地安装webpack和webpack-cli
// 其中webpack-cli用于在命令行上运行webpack命令
此时webpack-demo目录下会多出node_modules目录（如果使用的是npm 5+，则webpack-demo目录还会多出一个package-lock.json文件）
5、继续创建相关文件和目录
创建目录src，并在src里创建index.js文件，脚本内容为：
index.html的内容为：
我们在index.html中引入了需要的lodash。
我们直接在浏览器访问index.html，得到结果：
设置当前的项目为私有项目，不允许发布到npm的仓库中。
我们之所以能通过npm install --save-dev webpack安装webpack，是因为webpack这个项目被发布到了npm的仓库中。
但在这里，我们不想将webpack-demo放到npm的仓库中，不想让别人安装。（虽然不够格）
同时，我们移除main入口。
对比原package.json文件，发现少了main入口。
关于package.json的更多信息，请参考：https://docs.npmjs.com/files/package.json
在两个位置的script标签之间，是存在隐式依赖的：index.js依赖于lodash的，如果不提前加载lodash，则index.js无法运行，会导致程序报错。
从上面的写法看，我们看不出index.js依赖于lodash，即使删除index.html中关于lodash的引入，也无法看到报错，除非在浏览器中查看index.html。
此时，使用webpack可以解决上面的三个问题。
6、webpack开始派上用场
首先调整目录结构：
dist目录：分发代码文件夹，用于存放分发代码。
src目录：源代码文件夹，用于存放源代码。
源代码是指用于书写和编辑的代码。
分发代码是指经过最小化和优化后产生的代码，最终将在浏览器中加载。
注意：为了演示，所以上面的dist/index.html是我们手动创建并编辑的，真正使用时，
会由webpack自动创建和更新index.html，无须人工干预。
为了使用webpack命令将lodash打包到index.js文件中，我们需要提前将lodash安装到本地，方便webpack使用。
npm install --save lodash
这里需要讲一个区别：
npm install --save lodash
npm install --save-dev webpack webpack-cli
我们安装webpack和webpack-cli，是因为我们需要用到webpack命令来打包，它仅仅是将文件打包而已，是作为开发辅助工具出现的。
因此是--save-dev。
我们安装lodash是因为项目的运行需要用到它，如果不安装它，则项目无法运行。
因此是--save（或者不写，npm install lodash，默认会自动带上--save）。
现在，在我们的index.js中引入依赖：
打包
执行 npx webpack 命令来打包
index.js和lodash.js被打包成了一个文件：main.js，该文件被放到了dist目录下。
现在的目录结构是：
我们看一下main.js的内容：
发现内容是经过压缩的。
然后修改index.html文件：
官方文档中称 main.js 是一个bundle，英文翻译为 包。确实，它是经过许多文件编译后形成的最终包文件。
在index.js文件中，我们显式通过import语句导入lodash，然后将它绑定为 _（没有全局作用域污染）。
通过声明模块所需的依赖，webpack 能够利用这些信息去构建依赖图，然后使用图生成一个优化过的 bundle，并且会以正确顺序执行。
可以这样说，执行 npx webpack，会将我们的脚本 src/index.js 作为 入口起点，也会生成 dist/main.js 作为 输出。
在浏览器中访问dist/index.html：
跟刚才的结果一样。
7、webpack的配置文件
webpack.config.js
配置文件中设置了入口文件和输出文件。
webpack的入口文件默认就是src/index.js，输出文件默认就是dist/main.js，因为刚才我们没有webpack.config.js，也是这样生成的。
打包时，指定配置文件：
执行npx webpack，如果本地存在webpack.config.js，则webpack默认会使用它；
执行npx webpack，如果本地不存在webpack.config.js，则webpack根据默认情况来打包；
这里使用 --config 选项只是向你表明，可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用的。
也就是说webpack.config.js不是规定的名字，你可以使用任何其他名字的文件。
在配置文件webpack.config.js中，可以指定 loader 规则(loader rule)、plugin(插件)、resolve 选项，以及许多其他增强功能。
8、快捷方式
我们之前是使用 npx webpack 来完成打包的。
在package.json的scripts部分增加：
这个快捷方式的作用是：
原先的 npx webpack 可以使用 npm run build 来替代了。
npm run build 被称为 npm scripts。
npm run build 和 npx webpack一样，都可以通过模块名引用本地安装的 npm packages。
在使用 快捷方式 的同时，向webpack传递自定义参数：（这里只是举例，并不是只有--color一个参数）
