1、创建项目路径
创建一个名称为 vue2-webpack4-project 文件夹
2、使用 yarn 初始化
yarn init
3、安装 webpack
安装方式分为本地安装和全局安装。对于大多数项目，建议本地安装，更容易分别升级项目。
要安装最新版本或特定版本，请运行以下命令之一：
yarn add webpack -D
yarn add webpack@<version> -D
如果你使用 webpack 4+ 版本，你还需要安装 CLI。
yarn add webpack-cli -D
4、添加路径和文件
添加 dist 路径，用来存放打包后文件；该路径下创建 dist 路径下创建 index.html 文件，用来加载打包后的 js 文件；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-准备工作</title>
</head>
<body>
<!-- webpack配置会将main.js文件生成到index.html所在的dist目录 -->
<script src="main.js"></script>
</body>
</html>
添加 src 路径，用来存放源代码；该路径下创建 src 路径创建 index.js 文件，添加代码，用来查看打包效果；
//生成一个内容为Hello webpack !的div标签
function component() {
let element = document.createElement('div');
element.innerHTML = "Hello webpack !";
return element;
}
//将生成的div标签添加到body中去
document.body.appendChild(component());
5、打包并查看
执行指令
npx webpack
执行成功后，dist 路径下会有 main.js 文件，此时在浏览器中打开 index.html 文件，页面中即可看到 Hello webpack !
