%20(2).svg)
项目简介
这是一个基于Webpack和React的简易前端项目。借助Webpack完成模块打包工作，利用Babel进行JSX转换。通过clean-webpack-plugin清理旧的构建文件，使用html-webpack-plugin自动将打包后的文件插入到HTML模板中。
项目的主要特性和功能
- 以Webpack作为模块打包工具，支持单文件配置、导出为函数以及多文件配置等多种配置方式。
- 支持React和JSX语法，通过Babel进行转换。
- 利用
clean-webpack-plugin清除/build文件夹下的上一次生成文件。 - 借助
html-webpack-plugin自动将打包后的js、css文件插入到html中，还能指定html文件的模板。 - 开发和生产环境构建配置存在差异，开发环境使用
webpack-dev-server，且支持proxy功能。
安装使用步骤
安装依赖
bash
cnpm install webpack react react-dom react-router-dom @babel/core @babel/preset-env @babel/preset-react --save
安装clean-webpack-plugin和html-webpack-plugin：
bash
cnpm install clean-webpack-plugin html-webpack-plugin --save-dev
安装webpack-dev-server：
bash
cnpm install webpack-dev-server --save-dev
注意：若未安装cnpm，请使用npm或yarn代替。
配置Webpack
本项目采用导出多个配置对象的方式，具体配置细节参考项目中的webpack配置文件。
运行开发环境
使用webpack-dev-server启动开发服务器，在终端运行：
bash
webpack serve --open
此命令会启动开发服务器并在默认浏览器中打开应用程序。
构建生产环境
在项目根目录运行以下命令构建生产环境的代码：
bash
webpack --mode production
构建后的文件将存于项目的/build文件夹中。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】