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

Apply webpack config to electron main process

鉴于使用 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 配置，或者在应用程序启动之前构建？

相关讨论

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

1
2
3

"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 设置为目标。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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