电子的正确 webpack 配置 - 不同捆绑包的不同目标

Question

大家好，当我开始使用 webpack 后，我在 Electron 上遇到了一段非常艰难的时期。

这是我的配置：

module.exports = function (env) {
    return {
        devtool: 'cheap-module-source-map',
        entry: {
            background: './src/electron/background/index.js',
            app: './src/electron/app/index.js'
        },
        output: {
            path: path.join(__dirname, '../dist/electron'),
            filename: '[name]/index.bundle.js'
        },
        resolve: {
            extensions: ['.js']
        },
        module: {
            loaders: [
                { test:/\.css$/, exclude:/node_modules/, use:['style-loader', 'css-loader'] },
                { test:/\.js$/, exclude:/node_modules/, loader:'babel-loader' }
            ]
        },
        target: 'electron',
    }
}

我有两包，一包是，background另一包是app。目标background是electron-mainwhile appis electron-renderer。但是我只能在我的配置中设置一个目标。如何根据捆绑设置不同的目标？

谢谢

Answer 1

只需将其输入为数组即可

const path = require('path');

var webpack_config = [
    {
      entry: path.join(__dirname, "src", "js", "main.js"),
      output: {
        path: path.join(__dirname, "build"),
        filename: "main.js"
      },
      target: "electron-main",
    },
    {
      entry: path.join(__dirname, "src", "js", "renderer.js"),
      output: {
        path: path.join(__dirname, "build"),
        filename: "renderer.js"
      },
      target: "electron-renderer"
    }
];

module.exports = webpack_config;

https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations