首先，我们创建一个目录，初始化npm并获取一个package.json文件。
安装webpack和相关依赖项。webpack-dev-server是打开开发环境的服务。WebPack-Merge是一个组合的公共配置文件。
目前获取以下结构
现在，我们将创建以下目录结构，文件和内容：
公众索引的内容如下：
SRC的索引的内容如下：
让我们安装html-webpack-plugin。插件-in将为您生成HTML5文件，并使用主体中的标签介绍您生成的所有捆绑包
webpack.common.js的公共配置如下：
webpack.dev.js配置如下。我们使用WebPack-Merge结合公共配置：
修改package.json文件，以及dev命令。
然后，Console NPM Run Dev返回到http：// localhost：8080。如果页面出现在页面上以证明本地服务成功，更详细的配置可以查看WebPack官方网站https：//webpack.docschina。org/guides/。
我们安装与样式文件相关的加载程序。在WebPack 5中，我们可以使用内置的资产模块来处理图像和字体。我们不需要安装它。
修改webpack.commmon.js文件：
这样，可以使用CSS和SASS的样式文件。
我们想在生产环境中安装React和React-Dom，因为React的编译依赖性取决于Babel，并且我们还安装了与Babel相关的依赖关系。Babel主要是以下内容：
修改webpack.common.js文件，添加babel的加载程序，当然，您还可以使用配置文件.babelrc的形式。
然后，我们将组件导入src的index.js.baf the react18中的页面。Switch-Creteroot。我们将index.js的代码修改为：
浏览器打开http：// localhost：8080/获取以下内容被证明可以增加React成功。
全名是中文表示替换热模块。它是提供的最有用的功能之一。它允许在运行时替换，添加，删除各种模块，而无需完全刷新整个页面。从v4.0.0启动热模块，默认情况下打开更换。只是打开热模块更换：
默认情况下，上面的一个打开，我们不会配置它，但是设置只是用于热门更新的样式文件。我们的JSX或JS修改再次刷新。因此，我们要修改SRC的index.js文件以进行React的热更新。
我们将以下代码添加到webpack.prod.js以进行简单包装。更多包装优化视图https://webpack.docschina.org/guides/
同时，修改package.json文件代码，并添加包装命令：
然后包装NPM运行构建。
以上是WebPack5的大概过程，以构建一个简单的React脚手架项目，并总结了某些WebPack5的新功能。我将总结WebPack的包装优化。
项目地址：https：//gitee.com/chen-kangsen/react-cli.git
原始：https：//juejin.cn/post/7095249957141102629