在电子应用程序的 webpack 配置中设置多个目标的问题

问题描述

在 webpack 文档中：https://webpack.js.org/configuration/target/ 我们看到电子渲染器、电子主和电子预加载有特定的 webpack 目标，到目前为止，我一直在使用“电子渲染器”作为目标。

今天我一直在尝试使用一个库，特别是 libp2p，我意识到，只有当 webpack.renderer.js 中的目标设置为“web”时，它才能与电子一起使用。

webpack.renderer.js :

/* eslint-disable @typescript-eslint/no-var-requires */
const rules = require('./webpack.rules');
const plugins = require('./webpack.plugins');
const aliases = require('./webpack.aliases');

module.exports = {
  // https://github.com/electron/electron/issues/9920
  //target: 'electron-renderer',target: 'web',module: {
    rules,},plugins: plugins,resolve: {
    extensions: ['.js','.ts','.jsx','.tsx','.css'],alias: {
      // React Hot Loader Patch
      'react-dom': '@hot-loader/react-dom',// Custom Aliases
      ...aliases,};

此处：https://webpack.js.org/concepts/targets/#multiple-targets 我们读到“虽然 webpack 不支持将多个字符串传递给目标属性，但您可以通过捆绑两个单独的配置来创建同构库”。

所以...我尝试设置两个单独的配置，然后以这种方式捆绑它们：

const rules = require('./webpack.rules');
const plugins = require('./webpack.plugins');
const aliases = require('./webpack.aliases');

const electronConfig = {
  target: 'electron-renderer',}

const webConfig = {
  target: 'web',}

module.exports = [ electronConfig,webConfig ];

但是得到这个错误：

yarn run v1.22.5
$ cross-env NODE_ENV=development electron-forge start
✔ Checking your system
✔ Locating Application
✔ Preparing native dependencies: 1 / 1
✔ Compiling Main Process Code
✖ Launch Dev Servers

An unhandled error has occurred inside Forge:
Invalid configuration object. Webpack has been initialised using a configuration object that
does not match the API schema.
 - configuration has an unkNown property '1'. These properties are valid:
   object { amd?,bail?,cache?,context?,dependencies?,devServer?,devtool?,entry?,externals?,infrastructureLogging?,loader?,mode?,module?,name?,node?,optimization?,output?,parallelism?,performance?,plugins?,profile?,recordsInputPath?,recordsOutputPath?,recordsPath?,resolve?,resolveLoader?,serve?,stats?,target?,watch?,watchOptions? }
   For typos: please correct them.
   For loader options: webpack >= v2.0.0 no longer allows custom properties in 
configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to
 the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
     // test: /\.xxx$/,// may apply this only for some modules
       options: {
         1: …
       }
     })
   ]
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised
 using a configuration object that does not match the API schema.
 - configuration has an unkNown property '1'. These properties are valid:
   object { amd?,watchOptions? }
   For typos: please correct them.
   For loader options: webpack >= v2.0.0 no longer allows custom properties in 
configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to 
the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/,// may apply this only for some modules
         options: {
           1: …
         }
       })
     ]
    at webpack (/home/marco/webMatters/electronMatters/OnlyLibp2p/node_modules/@electron-
forge/plugin-webpack/node_modules/webpack/lib/webpack.js:31:9)
    at /home/marco/webMatters/electronMatters/OnlyLibp2p/node_modules/@electron-
forge/plugin-webpack/src/WebpackPlugin.ts:291:24
    at processticksAndRejections (internal/process/task_queues.js:93:5)
error Command Failed with exit code 1.

所以...我的问题是：

如何在 webpack 中正确设置多个目标？使用“web”作为单一目标有什么问题？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

electron-forge javascript typescript typescript webpack webpack webpack