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

问题描述

我正在创建一个 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,'licensing.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
    },

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

提前致谢

解决方法

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

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

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