将 webpack 配置应用到电子主进程答案

【问题标题】：Apply webpack config to electron main process将 webpack 配置应用到电子主进程
【发布时间】：2017-08-28 18:15:43
【问题描述】：

鉴于使用chentsulin/electron-react-boilerplate 构建的应用程序，我想将 webpack 配置应用到主进程（app/main.js 文件也是）。

事实上，webpack 加载器只考虑到渲染器进程（对应于除app/main.js 和app/menu.js 之外的所有文件）。这使得代码的可重用性变得困难，尤其是如果想在主进程中使用 redux（例如在菜单中或处理多个窗口时很有用）。

例如，TypeScript loader 没有被调用，所以main 不能是 TypeScript 文件，也不能导入 ts 文件，这会导致其他类似的导入问题。

注意 babel 也可以使用，所以基本的 ES6 即使在主进程中也可以。

所以，这一切都在标题中：我如何设置应用程序以便app/main.js 以某种方式考虑 webpack 配置，或者在应用程序启动之前构建？

【问题讨论】：

您找到解决方案了吗？我正在尝试让打字稿在电子应用程序的主要流程上工作，尽管没有使用与您相同的样板（我在 basic-electron-react-boilerplate 上）。
嗨@Jules 我发布了一个答案，告诉我它是否有帮助。我只是在现有配置的基础上为主流程添加了一个特定的配置，并添加了一个构建步骤。

标签： webpack electron babeljs

【解决方案1】：

为了解决这个问题，我为主进程添加了一个特定的脚本和配置：

"build-main-development": "cross-env NODE_ENV=development node --trace-warnings -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.electron.development.js --progress",

"build-main": "cross-env NODE_ENV=production node --trace-warnings -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.electron.js --progress --profile --colors"

这里是配置。您需要将electron-main 设置为目标。

import webpack from 'webpack';
import merge from 'webpack-merge';
import BabiliPlugin from 'babili-webpack-plugin';
import baseConfig from './webpack.config.base';

export default merge(baseConfig, {
  devtool: 'source-map',
  entry: ['babel-polyfill', './app/main.development'],
  output: {
    filename: './main.js'
  },
  plugins: [
    new BabiliPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ],

  /**
   * https://github.com/chentsulin/webpack-target-electron-renderer#how-this-module-works
   */
  target: 'electron-main',
  node: {
    __dirname: false,
    __filename: false
  },
});

【讨论】：

是的，这看起来比我尝试的更有效，我尝试将 webpack 设置为在相同配置中执行两个目标 - 它有效，只是有时会启动主进程在渲染器进程代码准备好之前。