Electron-renderer 不会从文件或 webpack-dev-server 加载 webpack 包

Question

在我将其与 webpack（dist 文件夹）捆绑后，Electron-renderer 不加载包含脚本的 html 文件。图片：nothing loaded 我确定我加载了正确的文件，因为如果我删除 html-webpack-plugin 在编译的 'index.html'.

我对 webpack-dev-server 进行了相同的尝试，结果因设置而异。

我首先运行 webpack-dev-server 启动后我从另一个 bash 实例启动电子（一个新的 GIT bash window 或命令 window）。结果总是空的 window 就像上一张图片 nothing loaded.
如果我运行 webpack-dev-server 和来自同一个 bash 实例的 electron 像这样：

package.json

{
  "scripts": {
    "start": "./start.sh"
  }
}

start.sh

#!/usr/bin/env bash

trap 'kill $(jobs -p)' EXIT
npm run serve &
npm run start:electron:server &
wait

有两个结果（这可能是因为我没有添加任何超时）。

2.1 DOM 未填充 - 就像第一张图片 nothing loaded 一样。但是捆绑的脚本已加载脚本已加载.

2.2 DOM 已填充 DOM loaded and the bundled script is laoded script loaded。人们可以认为它工作正常。但是如果我更改代码 empty html empty js. Electron also does not show properties if I log an object and press the triangle on the left. doesnt update log

电子会重新加载空源

对于我使用 webpack-dev-server 的每个设置（相同的 bash 实例和不同的实例）我无法通过右上角的红叉或通过文件关闭电子 | webpack-dev-server 启动后退出，electron 监听它。我怀疑这是由于打开的 websocket open websocket

tsconfig.json

{
    "compilerOptions": {
        "outDir": "dist",
        "module": "commonjs",
        "moduleResolution": "node",
        "target": "es2018",
        "noImplicitAny": true,
        "removeComments": true,
        "sourceMap": true,
        "baseUrl": "./",
        "paths": {
            "engine": ["../engine"]
        }
    },
    "exclude": [
            "node_modules",
            "**/*.spec.ts"
    ]
}

webpack.renderer.common.js

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: './index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    alias: {
      engine: path.resolve(__dirname, '..', 'engine')
    }
  },
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs2'
  },
  target: 'electron-renderer',
  externals: [nodeExternals()],
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src', 'index.html')
    })
  ]
};

webpack.renderer.dev.js

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.renderer.common.js');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        port: 8000
    }
});

package.json

{
  "main": "main.js",
  "scripts": {
    "start:electron": "cross-env electron .",
    "start": "./start.sh",
    "start:electron:server": "cross-env NODE_ENV=development electron .",
    "serve": "webpack-dev-server --config webpack.renderer.dev.js",
    "build": "webpack --config webpack.renderer.dev.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^2.0.1",
    "cross-env": "^5.2.0",
    "electron": "4.1.4",
    "html-webpack-plugin": "^3.2.0",
    "ts-loader": "^5.3.3",
    "typescript": "^3.4.4",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.3.1",
    "webpack-merge": "^4.2.1",
    "webpack-node-externals": "^1.7.2"
  }
}

Electron 应该从文件和服务器加载。它不做这些，我认为问题出在 webpack 和配置上。我不知道为什么电子可以在对 webpack-dev-server 的初始请求中完全（DOM 和脚本）或部分（仅脚本）加载代码，而不是在任何后续重新加载时失败。

Answer 1

我重新设置了我的项目。它现在确实有效。不过我还是不知道哪里出了问题。

Electron-renderer 不会从文件或 webpack-dev-server 加载 webpack 包

Electron-renderer does not load webpack bundle from file nor from webpack-dev-server

typescript

webpack

webpack-dev-server

electron