首先感谢掘金提供的平台，本系列的初衷是帮助开发者了解从npm init搭建vue项目的步骤；通过本系列开发者可以知道（1）在vue create app时具体做了什么（2）在工作中拿到的vue项目具体是怎么一步步成为现在的样子。通过详细的步骤+配图示例讲解，旨在让大家能够轻松学习vue项目搭建过程而不是将其视为洪水猛兽;在浏览本系列时首先要进行积极的自我暗示：我（读者）一定可以掌握！！！希望这套系列能为大家的开发旅程增添助力。
跟随本教程用到的工具：node；版本 18.14.0；npx 跟随 node 版本
为什么是18.14.0？因为这是电脑上之前就用到的node版本，想要使用更新或之后的版本都可以，遇到问题可以留言或者尝试自己解决，并记录解决过程，这也是学习技术的好习惯。
npx如何下载？无需下载，在node5.2.0版本之后，内置在node软件包中
node下载地址：官网nodejs.org/en/download…
详细步骤
第一步 准备一个空文件夹
这一步的主要目的是获得一个独立的工作区，和系列主题从0-1相应；
第二步 npm init&&输入基本信息
万事开头难，npm init就是万里长征第一步，项目初始化；这一步的工作无论是自己要开发一个npm库还是创建和nodejs相关以及和前端框架开发相关的项目都至关重要的一步，
npm init 回车之后会要求填写一些基本信息；按照实际信息来就好；后期也可以更改里面的内容
填写完成之后会在当前目录下得到一个 package.json；
打开之后长这样，也可以自己新建一个文件命名为 package.json，然后按照 npm init 命令生成的格式编写对应的字段，这个文件是可扩展的，作用就是储存当前项目的信息；关于更多的 package.json 文件信息可以在 npm 官方文档中查看
常用的就是 dependices 和 devDependices 以及 script 中的 dev,build 命令，test 是用来测试的
第三步 安装项目依赖
在 package.json 文件夹路径下运行 npm i webpack webpack-cli --save-dev
结果
安装 vue 相关组件 npm i vue@2.x vue-loader vue-template-compiler
vue vue 项目的核心组件
vue-loader 在 webpack 中使用的 loader 用于解析 vue 单文件组件
vue-template-compiler 用于编译 vue 单文件组件中的 template
第四步 创建入口文件 main.js 和 index.html 使用 webpack 来打包的项目都需要一个入口文件，这个入口文件在 package.json 文件中通过 main 字段来指定；如果有 webpack.config.js，那么可以在 webpack.config.js 中通过 entry 指定入口文件，并且在 npm script 中使用脚本 npm run xxx 来来指定 webpack 的打包时使用的配置文件（--config xxxWebpack.config.js）及入口文件(entry)
示例 1：使用 webpack 命令行工具 webpack-cli 来打包项目 npx webpack 打包时会默认以/src/index.js 为项目的入口文件
打包前
打包后
可以看到打包结束后得到了一个/dist/main.js 文件，这个文件就是经过 webpack 打包之后的文件；在 index.html 中如论引入 index.js 还是引入 main.js 得到的结果都是一样的。
index.html引入index.js
index.html引入main.js
在终端还能看到一些提示信息，提示说没有设置 mode 字段的值，webpack 会用 production 来打包项目文件
使用 npx webpack 命令行添加 mode 也很简单 使用 npx webpack --mode=production 即可；更多命令行使用信息可以在 npx 官方文档中查看
简单介绍一下 npx
可以看到 npx 是 npm 在 5.2.0 版本之后引入的一个实用工具，主要作用是在不污染环境的情况下使用本项目下载的 cli 工具而无需提前全局下载或临时下载需要用到的 npm 包用完之后再删除
使用 webpack 打包的另一个方法，也是项目中常用的一项是在 npm script 中添加字段来变化打包命令,即 npm run build
在终端中输入 npm run build 并回车之后实际上执行的是 npx run webpack --mode=production，也就是说在 npm run field 时，实际上执行的是 npx run script["field"] 的内容，field 对应的值就是在命令行中输入的命令
不过 webpack 还是推荐使用 webpack.config.js 即配置文件，使用配置文件的主要原因是 1 可以不用在命令行中使用一长串的命令来打包，每次打包都要输入这么多命令总有忘记的时候，好记性不如烂笔头，不如直接写下来每次都能用配置好的减少人为因素造成的失误
；2 是在大型项目中如果存在多个配置文件可以使用 npx webpack --config xxxwebpack.config.js 来打对应项目的包，颗粒度更加细致。
示例 2：使用 npm run build 并指定 webpack.config.js 来打包项目
webpack.config.js
package.json
打包后
打开 index.html 还是能看到 Hello Vue
总结 本系列给大家介绍了npx和webpack两个常用工具；npx是node5.2.0之后内置的一个工具，具体作用是临时安装需要用到的npm包并在用完之后就删除，不占用硬盘资源也不污染开发环境是一个小但是实用的工具；虽然现在新一代的打包工具比如vite横空出世速度更快，但是webpack作为在2012年出现的打包工具了解他的基本工作原理在大型复杂项目的构建上依然有应用价值
写本系列的初衷 作为入行两年的开发者，在工作时能接手的前端项目各种各样，有的结构清晰，逻辑紧密，虽然是包含很多的table但是改起来心力耗费较少，而有的项目虽然页面没几个，但是封装的就像老奶奶裹脚布一样；真不知道开发者的技术到底是看了哪本书学的。写本系列的初衷（1）通过详细步骤+配图的方式提高大家阅读源码的积极性（2）提升自己的技术积累+表达能力（3）尝试公开写作内容，在反馈中提升自己，做一个技术领域的推动者
写在结尾的话 本人入行互联网两年，拥有丰富的前端开发经验包括但不限于vue2/3全家桶开发,react+rtk,nodejs,python,java spring boot/微服务等开发经验；并且拥有PMP专业人士认证，在工作中发现更偏好与人交流并通过沟通影响决策，所以现在正在找项目经理或前端开发的工作，欢迎私信联系！
