webpack - Electron 的正确 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-main而 app是 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