【webpack学习】React项目中webpack.config.js 和 webpack.base.config.js 的区别

周兴2024-01-15 15:33

在React项目中，通常使用Webpack作为打包工具。webpack.config.js 和 webpack.base.config.js 两个文件在项目中的作用是不同的。

1. webpack.config.js

webpack.config.js 是Webpack的主要配置文件，它包含了项目的通用配置以及针对不同环境（如开发环境和生产环境）的特定配置。
这个文件包含了整个Webpack配置的基本结构，包括入口文件、输出配置、模块加载器（Loaders）、插件（Plugins）等。
在开发环境和生产环境中，可以通过条件判断来设置不同的配置，例如使用不同的插件、开启不同的优化等。

javascript 复制代码

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      // 规定模块加载器
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html'
    })
    // 其他插件配置
  ],
  // 其他通用配置
};

2. webpack.base.config.js

webpack.base.config.js 是Webpack配置的一部分，通常用于存放通用的配置，即适用于所有环境的配置项。
这个文件的目的是将一些通用的配置提取出来，以便在不同环境的配置文件中引用和继承。这样可以避免在多个配置文件中重复书写相同的配置项，提高配置的可维护性。
典型的共享配置包括模块加载器、插件、解析规则等。

javascript 复制代码

const path = require('path');

module.exports = {
  module: {
    rules: [
      // 共享的模块加载器规则
    ]
  },
  resolve: {
    // 共享的解析规则
  },
  // 其他通用配置
};

在实际项目中，通过将通用的配置提取到 webpack.base.config.js 中，可以使项目的Webpack配置更加清晰、可维护，同时在不同环境的配置文件中只需要关注特定环境的差异性。