作为库扩展

使用 electron-webpack 的巨大好处之一是 webpack 的所有文档仍然适用。您可以轻松跳过使用提供的 CLI 并修改配置以满足您的需求。由于 electron 使用多进程架构，因此也有多个 webpack 配置。让我们介绍一下所提供的配置。

配置文件

• electron-webpack/webpack.main.config.js (main 进程)
• electron-webpack/webpack.renderer.config.js (renderer 进程)
• electron-webpack/webpack.renderer.dll.config.js (Dll 包拆分)

如果您想在内部查看这些配置，您可以轻松地执行以下操作以将它们打印到控制台中。请注意，每个配置都返回一个 Promise。

const webpackMain = require('electron-webpack/webpack.main.config.js')
const { inspect } = require('util')

webpackMain().then(config => {
  console.log(inspect(config, {
    showHidden: false,
    depth: null,
    colors: true
  }))
})

添加自定义加载器/插件

假设我们需要在 renderer 进程中支持 *.txt 文件，并想使用 raw-loader 来实现，以下是我们如何设置它的方法。

安装 raw-loader

yarn add -D raw-loader

myCustomWebpack.renderer.config.js

const webpackRenderer = require('electron-webpack/webpack.renderer.config.js')

module.exports = env => {
  return new Promise((resolve, reject) => {

    /* get provided config */
    webpackRenderer(env).then(rendererConfig => {

      /* add `raw-loader` */
      rendererConfig.module.rules.push({
        test: /\.txt$/,
        use: 'raw-loader'
      })

      /* return modified config to webpack */
      resolve(rendererConfig)
    })
  })
}

现在，有了新的自定义 webpack 配置文件，您可以使用原生的 webpack CLI。

webpack --config myCustomWebpack.renderer.config.js