如果你使用 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配置允许你根据项目需求添加各种加载器、插件和其他配置,