React 项目中 webpack 4 配置指南：DEV 和 PROD 环境下优雅打包

2024-01-29 04:02:26

在 React 项目中，打包配置是至关重要的，因为它确保了代码的有效性和优化。webpack 4 是一个功能强大的打包工具，它允许我们创建灵活且高效的构建过程。在本指南中，我们将探讨如何使用 webpack 4 为 React 项目配置 DEV 和 PROD 环境的打包配置。

DEV 环境配置

在开发环境中，我们希望快速且增量地进行构建，同时保持代码的可调试性。为此，webpack 的 DEV 配置应如下所示：

module.exports = {
  // 入口文件
  entry: './src/index.js',
  // 输出文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  // 使用 babel-loader 编译 ES6 代码
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  // 开发服务器配置
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

PROD 环境配置

在生产环境中，我们专注于生成高度优化的代码，以获得最佳性能。webpack 的 PROD 配置应如下所示：

module.exports = {
  // 入口文件
  entry: './src/index.js',
  // 输出文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.min.js',
  },
  // 使用 babel-loader 编译 ES6 代码
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  // 优化代码
  optimization: {
    minimize: true,
    // 移除无用的 console.log()
    removeAvailableModules: true,
  },
};