Cra和webpack结合创建React项目的详细步骤

步骤"/>

Cra和webpack结合创建React项目的详细步骤

如果你使用 Create React App (CRA) 和 Webpack 进行项目开发，以下是一般的步骤：

1. 创建项目：使用 Create React App 创建一个新的 React 项目。可以使用以下命令创建项目：

   npx create-react-app my-app
   cd my-app

   上述命令将在当前目录下创建一个名为 my-app 的新 React 项目，并进入该项目目录。

2. 安装Webpack相关依赖：进入项目目录后，安装Webpack和相关的依赖项。执行以下命令：

   npm install --save-dev webpack webpack-cli webpack-dev-server

   上述命令将安装Webpack、Webpack命令行工具和Webpack开发服务器。

3. 创建Webpack配置文件：在项目根目录下创建一个名为 webpack.config.js 的文件，并在该文件中配置Webpack。可以根据项目需求添加所需的加载器、插件和其他配置。以下是一个简单的示例：

   const path = require('path')
   const MiniCssExtractPlugin = require('mini-css-extract-plugin')
   const HtmlPlugin = require('html-webpack-plugin')module.exports = {entry:'./src/index.js',mode:'development',output:{path:path.resolve(__dirname,'dist'),filename:'bundle.js'},resolve:{extensions:['.js','.jsx','.png']   //引入文件时可以省略后缀},plugins:[new MiniCssExtractPlugin(),//必须配置这个，不然HTML页面不会显示new HtmlPlugin({ //这个插件将index.html放入根（内存）并将bundle.js注入到复制的脚本template: './public/index.html', //设置你的HTML文件在哪filename: './index.html'})],devServer:{// 设置服务器在哪个地址打开页面open:true,   //自动打开浏览器host:'127.0.0.1',port:3000,// proxy配置代理服务器，将特定URL请求转发到其他服务器。以解决前端开发中的跨域请求问题proxy:{'/api':{   ///api指定需要代理的URL路径target:'http://127.0.0.1:3001'   //target指定目标服务器的URL，既请求将被转发到该服务器}}},module:{rules:[{test:/\.(js|jsx)$/i,exclude:/node_modules/,use:'babel-loader'       //   npm i babel-loader -D},{test: /\.css$/i,use: [MiniCssExtractPlugin.loader, 'css-loader']      //npm i mini-css-extract-plugin -D},{test: /\.(png|jpg|gif|svg)$/,use: [{loader: 'url-loader',   //npm i url-loader -Doptions: {name: 'assets/[name].[ext]',      //输出文件的名字limit: 8192,outputPath: 'image', //配置图片路径},}],},{test:/\.ico$/,use:[{loader:'file-loader',  //npm i file-loader -Doptions:{name:'[name].[ext]',outputPath:'assets/icons'}}]}],}
   }

   上述配置文件示例中，指定了入口文件、输出路径和文件名，并配置了使用Babel加载器来处理JavaScript和JSX文件。

4. 安装Babel

   npm install babel-loader -D
   npm install @babel/preset-react -D

   根目录下新建一个babel.config.js文件

   module.exports = {"presets":["@babel/preset-env","@babel/preset-react"    ]
   }

5. 修改CRA配置：为了让CRA项目使用自定义的Webpack配置，需要修改 `package.json` 文件中的 `scripts` 部分。将 `"react-scripts"` 替换为 `"webpack-dev-server --config webpack.config.js"`，如下所示：

   "scripts": {"start": "webpack-dev-server --config webpack.config.js","build": "webpack --config webpack.config.js"// 其他命令
   },

6. 运行项目：执行以下命令来启动开发服务器并运行项目：CRA将使用自定义的Webpack配置启动开发服务器，并在浏览器中打开你的React应用。

    npm run start

7. 打包项目：当你准备部署项目时，执行以下命令来进行打包,该命令将使用自定义的Webpack配置对项目进行打包，并在项目根目录下创建一个名为 dist 的目录，其中包含优化和打包后的生产代码。

   npm run build

   通过以上步骤，你可以使用Webpack对Create React App项目进行打包。自定义的Webpack配置允许你根据项目需求添加各种加载器、插件和其他配置，