react 项目只打包更改后的文件
时间: 2023-08-16 10:09:39 浏览: 53
如果你只想打包更改后的文件,而不是重新打包整个项目,你可以使用增量打包的方法来实现。以下是具体步骤:
1. 安装 `webpack` 和 `webpack-cli` 依赖
```
npm install webpack webpack-cli --save-dev
```
2. 在项目根目录下创建一个 `webpack.config.js` 文件,并添加以下代码:
```javascript
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
app: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].[hash].js'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './build',
hot: true
}
};
```
这个配置文件中定义了项目的入口文件和输出目录,以及使用了热更新插件 `HotModuleReplacementPlugin` 和开发服务器 `devServer`。
3. 执行以下命令,启动开发服务器:
```
webpack-dev-server --config webpack.config.js
```
4. 开发服务器启动后,你可以在浏览器中访问项目,并进行修改。每次修改后,只有更改过的文件会被重新打包。
5. 如果你想要进行正式打包,只需要执行以下命令即可:
```
webpack --config webpack.config.js
```
这样只会打包更改过的文件,而不是重新打包整个项目。打包后的文件会输出到 `build` 目录中。