Proper webpack config for electron - different target for different bundle

user_3791822 0
Viewed 3744

Hi all I have been having a very tough time with electron once i moved to using webpack.

Here is my config:

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',
    }
}

I have two bundles, one is background and other is app. The background target is electron-main while app is electron-renderer. However I am only able to set one target in my config. How can I set different target based on bundle?

THank you

electron webpack
1 Answers

Just type it as an array

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

user_34362700
Related