CODEWITHSUNDEEP
webpackelectronbabeljs
Eric Burel
Eric Burel

Reputation: 4914

Apply webpack config to electron main process

Given an application built using chentsulin/electron-react-boilerplate, I'd like to apply the webpack config to the main process (app/main.js file too).

Indeed, as-is, webpack loaders are only taken into account into the renderer process (which correspond to all files except app/main.js and app/menu.js). This makes code reusability difficult, especially if one want to use redux in the main process (useful for example in the menu or to handle multiple windows).

For example, TypeScript loader is not called, so the main cannot be a TypeScript file and cannot import ts files as well, and it leads to other similar issue with imports.

Note that babel can be used however, so basic ES6 is ok even in the main process.

So, it's all in the title: how could I set up the app so that the app/main.js somehow take the webpack config into account, or is built before app launch ?

Upvotes: 4

Views: 3086

Answers (1)

Eric Burel
Eric Burel

Reputation: 4914

To solve this I added a specific script and config for the main process:

"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"

Here is the config. You'll need to set electron-main as the target.

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
  },
});

Upvotes: 3

Related Questions