Question

当我将其与webpack（dist文件夹）捆绑在一起后，Electron-renderer不会加载包含脚本的html文件。图片：nothing loaded 我确定我加载了正确的文件，因为如果我删除了html-webpack-plugin在已编译的“ index.html”中放置的脚本标签，则会加载该文件。

我在webpack-dev-server上尝试了相同的操作，结果因设置而异。

我先运行webpack-dev-server，然后启动它，然后从另一个bash实例（新的GIT bash窗口或cmd窗口）启动电子。结果始终是一个空窗口，就像上一个图像nothing loaded中一样。
如果我从同一个bash实例运行webpack-dev-server和电子，例如：

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一样。但是捆绑的脚本已加载script loaded。

2.2填充了DOM loaded的DOM，绑定了脚本的script loaded了。可以认为它运作良好。但是，如果我更改代码empty html empty js，电子会重新加载空源。如果我记录一个对象并按左侧的三角形，Electron也不会显示属性。 doesnt update log

对于使用webpack-dev-server的每个设置（相同的bash实例和不同的实例），我都无法通过右上角的红叉或通过File |在webpack-dev-server启动之后退出，电子会监听它。我怀疑这是由于开放的网络套接字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"
  }
}

电子应同时从文件和服务器加载。它两者都不起作用，我认为问题出在webpack和配置上。我不能说出为什么电子可以在向webpack-dev-server的初始请求中完全（DOM和脚本）或部分（仅脚本）加载代码，而随后的任何重新加载都会失败。

Answer 1

我重新设置了我的项目。而且它确实可以正常工作。不过，我仍然不知道出了什么问题。

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

1 个答案: