前言
有小伙伴肯定会好奇的问，这都什么年代了？还自己搭建项目模板？你这不是瞎折腾么？使用vue-cli一条命令就搞定了，它不香么？
为什么要自己搭建项目模板？
想必绝大多数用 Vue 开发过项目的同学，或多或少会有以下两种情况：
- 用
Vue CLI工具去搭建一个项目。 - 在领导或同事搭建好的项目基础上做业务。
长此以往，会导致你对整个项目的把控度越来越低。我们分两个角度考虑：
从团队的角度
- 在团队中使得我们的项目结构
规范化、统一化，减少维护成本。 - 清晰且规范的项目结构有助于团队成员更加
快速的上手项目，尤其是新人。 - 可以在项目
打包、热更新上做到更加灵活的配置跟优化。
从个人的角度
- 如果你想从一名
中级前端开发工程师进阶到高级前端开发工程师，甚至是前端架构师，想要凸显自己的核心竞争力，那项目脚手架的搭建也是进阶路上不可或缺的能力之一。 - 如果你自己不动手去撸一撸
webpack的配置，光靠阅读一些零零散散的八股文，怎们可能更深入的去理解各种各样的loader、plugin的作用？怎么可能更深入的理解项目热更新跟打包体积的优化？ - 如果面试下一家公司的面试官问你，是否手动搭建过
Vue项目的时候，对配置一问三不知。
所以本文着重为大家讲解从 0 到 1 搭建 Vue 3.x 开发环境 的过程中遇到的疑问。
这里提前说明，本文侧重新手向，只搭建了开发环境，主要是让大家了解一个过程，是一篇入门级别的文章，大佬对自己够自信的话，就看到这里，就此作罢。
开源代码
本文章源码：点击这里
配置 Webpack 环境
我们先抛开 Vue ，针对 Webpack 先搭建一个项目最初的模样，在你喜欢的目录下新建一个文件夹，并初始化项目：
// 创建文件夹 mkdir hand-webpack5-vue3-project && cd hand-webpack5-vue3-project // 初始化项目 npm init -y
此时你将会得到一个只有 package.json 文件的项目，接下来我们安装 webpack 和 webpack-cli ，命令行如下：
npm install webpack webpack-cli -D 或 yarn add webpack webpack-cli -D
webpack-cli 是执行 webpack 的工具。webpack 4.x 版本以后，剥离出了 webpack-cli ，所以这里我们需要单独下载它。
接下来在根目录添加如下 src 文件夹，并且在 src 文件夹内添加 main.js 文件，内容我们先不添加。再在根目录添加 index.html 和 webpack.config.js ，添加完后结构如下所示：
此时静态资源 main.js 跑在浏览器的内存里，热更新的速度那是相当快啊。
总结
本文主要是将讲解一个搭建 Vue 3 可运行的最小单位，所以还有不少配置需要添加，如 file-loader 、 url-loader 、 @babel/polyfill 等等等等。关注，后续会添加更多的配置，文中就不赘述了，祝大家工作学习愉快。