要求未在脚本标签中定义

Question

我正在编写一个电子应用程序，使用 react 作为 UI 和 webpack 进行捆绑。 Webpack 现在为应用程序的 react 部分配置如下：

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 环境中创建电子应用程序（没有 webpack 和反应）它无需任何额外配置即可工作。所以我猜我的 webpack 配置有问题，但是很遗憾我在网上找不到任何有用的资源。谁能帮我吗？提前致谢！

Answer 1

Electron 基本上是一个 Chromium 浏览器，通过 «IPC» 连接到节点进程。

这意味着您在浏览器中没有可用的 require。

你需要像这样导入你的脚本：

<script src="/build/bundle.js"></script>

您还需要将浏览器代码的目标从节点更改为电子渲染器。

如果您还需要为节点端构建代码，则需要添加电子主目标。

见https://webpack.js.org/configuration/