Question

我正在创建一个 Electron 应用，该应用将使用 2 个或更多条目来创建多个 Electron 窗口。

现在，我有我的主窗口和许可窗口。

这个问题最奇怪的是当我构建项目时，一切都很好，但是当它在开发中时，我的所有页面在每个 js 块上都给我这个错误 Uncaught SyntaxError: Unexpected token '<'。

Screenshot of the errors in the Electron browser

这是我的 config-overrides.js 文件：

const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
const multipleEntry = require('react-app-rewire-multiple-entry')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const fs = require('fs')
const path = require('path')

module.exports = {
  webpack: function override(config, env) {
    // New config, e.g. config.plugins.push...
    config.resolve.plugins = config.resolve.plugins.filter(
      (plugin) => !(plugin instanceof ModuleScopePlugin),
    )
    config.target = 'electron-renderer'
    config.entry = {
      main: config.entry,
      licensing: path.resolve(__dirname, 'src', 'licensing.js'),
    }
    config.output.filename =  "static/js/[name].js"

    config.resolve.modules = ['node_modules']
    config.resolve.alias = {
      ...config.resolve.alias,
      react: path.resolve('./node_modules/react'),
      'react-dom': path.resolve('./node_modules/react-dom'),
      '@setproduct-ui': path.resolve('./private_modules/@setproduct-ui'),
    }

    config.module.rules.push({
      test: /\.(jsx|js)$/,
      include: [
        path.resolve(__dirname, 'src'),
        path.resolve(__dirname, 'private_modules'),
      ],
      exclude: /node_modules/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  targets: 'defaults',
                },
              ],
              '@babel/preset-react',
            ],
          },
        },
      ],
    })
  
    config.plugins.push(
      new HtmlWebpackPlugin({
        filename: path.resolve(__dirname, 'build', 'main.html'),
        template: path.resolve(__dirname, 'public', 'index.html'),
        chunks: ['main']
      }),
      new HtmlWebpackPlugin({
        filename: path.resolve(__dirname, 'build', 'licensing.html'),
        template: path.resolve(__dirname, 'public', 'index.html'),
        chunks: ['licensing']
      })
    )

    fs.writeFile('webpackConfig.json', JSON.stringify(config, null, 2), function (err) {
      if (err) return console.log(err);
      console.log('webpackConfig');
    });

    return config
  }
}

我的 BrowserWindows 像这样加载他们的 HTML：

mainWindow.loadURL(
    isDev
      ? 'http://localhost:3000/main.html'
      : `file://${path.join(__dirname, '../build/main.html')}`,
  )

我尝试添加 html-loader，但它没有改变任何事情。

就像您在 config-overrides.js 底部看到的那样，我创建了一个文件以从 CRA 输出 webpack 配置并查看它以获取一些线索。

在文件中，我找到了这个对象，我尝试为两个条目复制它，但它的效果不如 2 HtmlWebpackPlugin。

{
      "options": {
        "template": "C:\\Users\\mikaelboutin\\Desktop\\recon\\public\\index.html",
        "templateContent": false,
        "filename": "index.html",
        "publicPath": "auto",
        "hash": false,
        "inject": true,
        "scriptLoading": "blocking",
        "compile": true,
        "favicon": false,
        "minify": "auto",
        "cache": true,
        "showErrors": true,
        "chunks": "all",
        "excludeChunks": [],
        "chunksSortMode": "auto",
        "meta": {},
        "base": false,
        "title": "Webpack App",
        "xhtml": false
      },
      "version": 4
    },

我尝试了很多很多东西，但现在我缺乏让它发挥作用的新想法。有人可以帮助我吗？

提前致谢

CRA 因开发中的多个条目问题而重新接线 - Uncaught SyntaxError: Unexpected token '<'

0 个答案: