如何从零开始使用webpack5搭建一个完整的react项目？

本文共计3393个文字，预计阅读时间需要14分钟。

前言：在此之前，每次开始一个新项目，我都是使用现有的脚手架，这非但不麻烦，反而便于快速启动新项目。通用的脚手架通常考虑得比较全面，也有利于项目的稳定开发。不过，对于小型项目而言，前脚手架可能就足够了。

前言

在这之前，每开始一个新项目我都是使用现有的脚手架，这非常便于快速地启动一个新项目，而且通用的脚手架通常考虑地更加全面，也有利于项目的稳定开发；不过对于一个小项目，根据需求自己搭建可能会更好，一方面小项目不需要脚手架那么丰富的功能，另一方面可以提高对项目的掌控度以方便后期的扩展。
这篇文章是在实践中总结的，具有实操性，读者可跟着一步步进行搭建，中间我会穿插一些原理，当然因为笔者的能力有限，不会特别深入。

预备知识

• 熟悉Javascript && HTML && CSS
• 熟悉ES6+
• 有能力搭建Nodejs环境
• 会用命令行

目标

学习使用webpack5和为什么使用它
用webpack5搭建开发环境
用webpack5搭建生产环境

什么是webpack

这有点老生常谈了，不过为了新同学能够看下去，在这里简单介绍一下。一个现代化的web应用，已经不是单纯地优html、css、javascript组成的，它还需要对应用进行打包、压缩和编译成浏览器能够理解的代码，于是webpack就开始流行起来了。

webpack是一个模块打包器，它可以打包任何东西。