正确的电子 webpack 配置 - 不同包的不同目标答案

【问题标题】：Proper webpack config for electron - different target for different bundle正确的电子 webpack 配置 - 不同包的不同目标
【发布时间】：2017-07-30 00:04:42
【问题描述】：

大家好，自从我开始使用 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-main，而 app 是 electron-renderer。但是我只能在我的配置中设置一个目标。如何根据捆绑包设置不同的目标？

谢谢

【问题讨论】：

标签： webpack electron

【解决方案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

【讨论】：