webpack 多种配置类型

在使用 Webpack 进行项目构建时，我们可以通过配置文件来指定 Webpack 的行为。Webpack 支持多种不同类型的配置，可以根据项目的需求来选择合适的配置类型。

1. 单一配置文件

最常见的配置方式是使用一个单一的配置文件来指定 Webpack 的配置。在项目根目录下创建一个名为 webpack.config.js 的文件，然后在文件中指定各种配置选项。

// www.javascriptcn.com code example
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

2. 多个配置文件

有时候我们可能需要根据不同的环境来使用不同的配置，这时可以使用多个配置文件来分别指定不同环境下的配置选项。比如，我们可以创建一个 webpack.config.dev.js 文件和一个 webpack.config.prod.js 文件分别用于开发环境和生产环境。

// www.javascriptcn.com code example
// webpack.config.dev.js
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  }
};

// www.javascriptcn.com code example
// webpack.config.prod.js
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  optimization: {
    minimizer: [new UglifyJsPlugin()]
  }
};

3. 使用函数配置

除了使用对象字面量来指定配置外，我们还可以使用函数来动态生成配置。这种方式可以根据不同的参数来生成不同的配置选项。

// www.javascriptcn.com code example
module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';

  return {
    mode: isProduction ? 'production' : 'development',
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: isProduction ? 'bundle.min.js' : 'bundle.js'
    },
    optimization: {
      minimize: isProduction
    }
  };
};

在实际项目中，我们可以根据具体需求选择合适的配置方式来配置 Webpack，并根据需要进行灵活调整。Webpack 提供了丰富的配置选项，可以满足各种项目的构建需求。