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

问题描述

在我将它与 webpack（dist 文件夹）捆绑后，Electron-renderer 不会加载包含脚本的 html 文件。图片：没有加载我确信我加载了正确的文件，因为如果我删除了 html-webpack-plugin 在编译的'index.html'中放置的脚本标签，它就会被加载。

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

我首先运行 webpack-dev-server，然后在它启动后，我从另一个 bash 实例（一个新的 GIT bash 窗口或 cmd 窗口）启动电子。结果总是一个空窗口，就像上一张图片没有加载一样。
如果我从同一个 bash 实例运行 webpack-dev-server 和电子，如下所示：

包.json

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

启动.sh

#!/usr/bin/env bash

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

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

2.1 DOM 没有填充——就像在第一个图像中没有加载一样。但是捆绑的脚本是加载脚本加载的的。

2.2 DOM 填充DOM 加载，捆绑脚本加载脚本加载。可以认为它工作正常。但是如果我更改代码empty html empty js ，电子会重新加载空源。如果我记录一个对象并按下左侧的三角形，电子也不会显示属性。不更新日志

对于我使用 webpack-dev-server 的每个设置（相同的 bash 实例和不同的实例），我无法通过右上角的红十字或通过 File | 关闭电子。webpack-dev-server 启动后退出，electron 监听它。我怀疑这是由于开放的 websocket开放的 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
    }
});

包.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 和配置上。我不知道为什么 electron 可以在对 webpack-dev-server 的初始请求时完全（DOM 和脚本）或部分（仅脚本）加载代码，而不是在任何后续重新加载时失败。

标签： typescriptwebpackelectronwebpack-dev-server

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

问题描述

解决方案

推荐阅读