react项目创建完成如何在里面添加webpack
时间: 2024-09-26 14:12:15 浏览: 40
在React项目中引入Webpack主要是为了处理模块打包和优化。如果你已经创建了一个基本的React项目,比如使用Create React App(CRA),那么Webpack已经在背后为你管理了。CRA默认使用的是Babel和Preset-env等工具链,不需要你直接配置Webpack。
如果你想手动添加Webpack到现有的CRA项目中,你可以按照以下步骤操作:
1. **移除Create React App默认构建脚本**:
- 删除`package.json`中`"scripts"`下的`"start"`, `"build"`, 和 `eject` 字段,因为它们会覆盖你的自定义设置。
2. **安装Webpack和相关依赖**:
```bash
npm install webpack webpack-cli @webpack/webpack-dev-server --save-dev
```
3. **创建Webpack配置文件**:
- 在根目录下创建一个名为`webpack.config.js`的文件,并配置基础的Webpack配置,如入口点、出口点和模块规则。
4. **修改`index.html`**:
- 将默认的HTML导入脚本从`<script src="bundle.js"></script>`改为指向你的Webpack编译后的入口文件。
5. **启动开发服务器**:
- 创建一个`devServer.js` 或者将配置添加到`webpack.config.js`中的`module.exports.devServer`里,然后运行:
```bash
node_modules/.bin/webpack serve --config webpack.config.js
```
6. **开发过程中的编译**:
- 对于每次改动,Webpack会在后台自动重新编译。