Я пишу электронное приложение, использующее реакцию, как для пользовательского интерфейса, и веб-пакет для комплектации.Webpack сейчас настроен для реагирующей части приложения следующим образом:
const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
mode: 'development',
entry: './src/index.tsx',
target:'node',
output: {
filename: '[name].bundle.js',
path: path.join(__dirname, 'build')
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: {
loader: 'ts-loader'
}
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader'
}
]
},
{
test: /\.css$/,
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
test: /\.scss$/,
use: [{
loader: "css-loader", options: {
sourceMap: true
}
}, {
loader: "sass-loader", options: {
sourceMap: true
}
}]
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
plugins: [
new HtmlWebPackPlugin({
template: "./index.html",
filename: "./index.html"
}),
new CopyWebpackPlugin([{ from: 'public',ignore: ['*.html'] }])
],
devtool: 'eval-source-map'
}
В моем index.html мне нужно использовать следующий скрипт-тег для процесса рендеринга электрона:
<script>
require('build/bundle.js')
</script>
Когда я запускаю webpack-dev-server, все компилируется без ошибок, но когда я открываю инструменты разработчика Chrome, я вижу эту ошибку:
Uncaught ReferenceError: require is not defined
at (index):12
Мне пришлось нацелить узел в моем webpack.config, чтобы заставить электрон работать, поэтому я предполагаюФункция require работает и в браузере, поскольку, если бы я создавал электронное приложение в чистой среде node.js (без веб-пакета и реагирования), оно работало бы без какой-либо дополнительной настройки.Итак, я думаю, что есть проблема с моей конфигурацией веб-пакета, но я не могу найти какой-либо полезный ресурс в Интернете, к сожалению.Может кто-нибудь мне помочь?Заранее спасибо!