Question

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

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

例如，不调用TypeScript加载程序，因此main不能是TypeScript文件，也不能导入ts文件，导致其他类似的导入问题。

请注意，可以使用babel，因此即使在主过程中基本的ES6也可以。

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

Answer 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配置应用于电子主要流程

1 个答案: