Electron 项目中 webpack.config.js 配置详解

在 Electron 项目中，可以使用 webpack 来配置打包和构建过程。以下是一个示例的 webpack.config.js 配置文件：

const path = require('path');

module.exports = {
  // 入口文件
  entry: './src/main.js',
  // 输出文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // 模块规则
  module: {
    rules: [
      {
        // 使用 babel-loader 处理 JavaScript 文件
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        // 使用 file-loader 处理静态资源文件
        test: /.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  // 插件
  plugins: [
    // 可以添加其他插件，如 HtmlWebpackPlugin 等
  ],
  // 配置开发服务器
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

这是一个基本的配置，你可以根据项目的需求进行修改和扩展。例如，你可以添加其他插件来优化和增强打包过程，配置自定义的 loaders 来处理不同类型的文件等。最后，你可以使用 webpack-dev-server 来启动开发服务器，方便开发调试。