Electron-рендерер не загружает пакет webpack ни из файла, ни из webpack-dev-server - PullRequest
Новая
       11

Electron-рендерер не загружает пакет webpack ни из файла, ни из webpack-dev-server

0 голосов
/ 06 мая 2019
  1. Electron-рендерер не загружает html-файл, включая скрипт, после того как я связал его с веб-пакетом (папка dist). Изображение: ничего не загружено Я уверен, что я загружаю нужный файл, потому что он загружается, если я удаляю тег script, помещенный html-webpack-plugin в скомпилированный файл «index.html».

Я попробовал то же самое с webpack-dev-server, и результаты будут разными в зависимости от настроек.

  1. Сначала я запускаю webpack-dev-server и после его запуска запускаю электрон с другого экземпляра bash (нового окна GIT или окна cmd). Результатом всегда является пустое окно, как на предыдущем изображении ничего не загружено .

  2. Если я запускаю webpack-dev-server и Electron из одного и того же экземпляра bash, примерно так:

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 не заполнен - ​​как на первом изображении ничего не загружено . Но в комплекте скрипт загружен скрипт загружен .

2.2 DOM заполнен DOM загружен , а связанный скрипт загружен скрипт загружен . Можно подумать, что все работает нормально. Но электрон перезагружает пустые источники, если я изменяю код empty html empty js . Электрон также не показывает свойства, если я регистрирую объект и нажимаю треугольник слева. не обновляет журнал

Для каждой установки, где я использую webpack-dev-server (и тот же экземпляр bash, и разные экземпляры), я не могу закрыть электрон через красный крест в правом верхнем углу или через File | Выходите после запуска webpack-dev-server и электрон слушает его. Я подозреваю, что это связано с открытой веб-розеткой открытой веб-розеткой

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 и конфигах. Я не могу сказать, почему электрон может загружать код полностью (DOM и скрипт) или частично (только скрипт) при первоначальном запросе к webpack-dev-server, а затем не удается при любой последующей перезагрузке.

1 Ответ

0 голосов
/ 07 мая 2019

Я настроил свой проект заново. И это работает сейчас. Я все еще не знаю, что пошло не так, как надо.

...