前言
在进入公司后日常的开发中，我们大部分都在对公司的项目进行维护与正常迭代，不同的公司前端生态不同，按照公司开发流程进行新项目以及monorepo组件库的开发，更多的时候作为一个使用者在巨人的肩膀上完成业务的开发。如果有一天，你的leader让你自己去搭建一个项目，对其进行架构，技术选型，你会如何应对。本文与其他内容不同，从一个空的文件夹开始，按需引入，实现一个简单的前端项目，将会具体讲清楚每一步的作用与自己在学习的时候遇到的一些坑。
初始化
- 当我们打开这个文件夹时，第一步肯定会对项目进行初始化处理，也是特别简单的一步，我这里使用pnpm来处理,通过
pnpm init指令初始化即可自动生成packgage.json文件。 - 生成package文件后，我们需要对所要用的依赖进行下载，考虑到是React+Ts+Sass项目，按需求pnpm add 即可，以下为代码部分：
pnpm add react react-dom sass typescript @types/react @types/react-dom - 当我们把最基础的东西进行引入之后，需要开始按照目录创建不同的文件以及文件夹,不可或缺的
src文件夹，创建入口文件，以及public中的静态资源(注：作为react项目public文件下必须要有index.html文件，react运行时会自动在public下寻找index.html文件，没有将会无法运行)
TypeScript引入
- 因为我们创建的是TS项目，所以必须要有tsconfig.json文件以及一些基础配置，具体其他配置本文讲不过多讲述。
- 接下来就该看一下我们的
index.tsx文件，写一下最基础的内容了，但首先我们应该去静态资源中创建一个常用的div，id设置为root，这在我们使用脚手架的时候，应该很熟悉了吧。对于
index.tsx文件我们也只需要做到能展示出来内容即可。如果不知道我们到目前为止有没有问题可以
pnpm add react-scripts来简单看一眼，在package.json的scrips进行配置"start":"react-scripts start"，输入pnpm run start来看一下。 我们所写的内容都进行了正常展示：
Webpack+Sass引入
- 当最基础的内容可以展示后，我们需要考虑后续的项目打包构建的问题，首先对webpack内容进行引入
pnpm add webpack webpack-cli以及通过webpack-dev-server来启动一个本地服务pnpm add webpack-dev-server - 依赖安装好之后，需要进行webpack配置，新建
webpack.config.js文件进行配置，对文件的出入口以及mode进行简单配置，因为我们使用的ts，所以需要通过配置loader将ts转为js，需要用到ts-loader，进行pnpm add ts-loader，安装完成后进行配置(注：这些是webpack最基础的一些引用，不太明白的小伙伴可以去webpack官方文档进行学习，传送门：webpack.docschina.org/) - 可以通过
npx webpack来试一下是否能正常打包成功,可以看到打包后生成了,对应的打包成功后的js文件 - 那我们到这一步是不是就可以正常通过
webpack-dev-server就可以代理本地服务来查看我们的项目呢，可以试一下，在package.json中配置"dev":"webpack-dev-server --open",当我们pnpm run dev运行起来后，发现在index.tsx中展示的123并没有在这里展示出来，控制台也没有这部分的内容，那我们这里可以理解这里启动本地服务之后是不是只访问了public中的内容，并没有和src下的内容串联起来，这时候该怎么办呢？ - 如果只是简单的访问到了
public文件夹下的index.html,也许有的小伙伴会想到，在public中引入打包好的dist文件里的fx.bundle.js不就可以了吗，我们来试一下，发现不但没有内容，反而控制台报错了，那说明这样做肯定是不行的。
6. 不过能想到这一步也基本上要解决问题了，在打包的结果中，不应该只有一个
js文件，还需要有打包生成的html,css文件才可以吧？所以我们这里需要继续对html和我们使用的sass进行打包。
7. 对html进行处理，需要引入新的依赖pnpm add html-webpack-plugin，并在webpack.config.js中进行配置。
8. 我们通过
npx webpack，来试一下配置是否成功，是否可以生成html文件，发现成功生成了html文件并且自动引入了所生成的fx.bundle.js文件，那我用VSCode插件打开一下这个html文件试试呢？发现最后结果一切正常内容也都进行了展示，说明我们都构建没有问题。
坚持一下，就差Sass的使用啦～
- 对于sass使用，需要创建对应的文件并在
src下的index.tsx中进行引入，webpack打包的原理中，需要从入口开始构建依赖图，文件中并没有引用scss文件在构建依赖图的时候就不会有这一部分的内容 - 对于sass转成css，需要使用多个loader，并且生成css文件，所以这里需要使用到一些其他依赖，
pnpm add mini-css-extract-plugin css-loader sass-loader，最近进行配置 - 我们来
npx webpack试一下是否成功，发现最后生成了对应的css文件并且在html中也对css文件进行了引入。 - 最后在
webpack.config.js中对webpack-dev-server进行配置，方便后续的路由等一些内容的设置。 - 通过
pnpm run dev看一下最终效果。所有的一切都进行了正常的展示。
结束语
本文章在不依赖react脚手架的前提下，从0->1按需引入，按自己的要求搭建了一个简单的前端项目，都是通过个人学习总结出来的，可能会存在理解上的错误，欢迎大家指正～～～
