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

(～安～)

已于 2023-05-26 17:01:06 修改

阅读量397

点赞数

文章标签： webpack react.js javascript

于 2023-05-26 11:14:32 首次发布

本文链接：https://blog.csdn.net/weixin_45015751/article/details/130882790

版权

本文介绍了如何在使用CreateReactApp的React项目中集成和配置Webpack，包括安装依赖、创建Webpack配置文件、配置Babel以及修改CRA的脚本以使用自定义配置。这允许开发者根据需求添加加载器、插件，如处理CSS、图片和代理服务器设置，以便于开发和打包项目。

摘要由CSDN通过智能技术生成

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

创建项目：使用 Create React App 创建一个新的 React 项目。可以使用以下命令创建项目：
```
npx create-react-app my-app
cd my-app
```
上述命令将在当前目录下创建一个名为 my-app 的新 React 项目，并进入该项目目录。
安装Webpack相关依赖：进入项目目录后，安装Webpack和相关的依赖项。执行以下命令：
```
npm install --save-dev webpack webpack-cli webpack-dev-server
```
上述命令将安装Webpack、Webpack命令行工具和Webpack开发服务器。

创建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 -D
					options: {
						name: 'assets/[name].[ext]',      //输出文件的名字
						limit: 8192,
						outputPath: 'image', //配置图片路径
					},
				}],
			},
			{
                test:/\.ico$/,
                use:[
                    {
                        loader:'file-loader',  //npm i file-loader -D
                        options:{
                            name:'[name].[ext]',
                            outputPath:'assets/icons'
                        }
                    }
                ]
            }
        ],
    }
}

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

安装Babel

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

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

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

修改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"
  // 其他命令
},
```
运行项目：执行以下命令来启动开发服务器并运行项目：CRA将使用自定义的Webpack配置启动开发服务器，并在浏览器中打开你的React应用。
```
 npm run start
```
打包项目：当你准备部署项目时，执行以下命令来进行打包,该命令将使用自定义的Webpack配置对项目进行打包，并在项目根目录下创建一个名为 dist 的目录，其中包含优化和打包后的生产代码。
```
npm run build
```
通过以上步骤，你可以使用Webpack对Create React App项目进行打包。自定义的Webpack配置允许你根据项目需求添加各种加载器、插件和其他配置，