Question

我正在设置 webpack 并在 SpringMVC webapp 中做出反应，但在点击我的 /index 页面时出现此错误。

相关的控制器方法在这里

@RequestMapping("/index")
public ModelAndView index(final HttpServletRequest request) {
    return new ModelAndView("index");
}

src/main/resource/templates/index.html 中的模板如下所示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Webpack App</title>
    </head>
    <body>
    <span>React Content Below:</span>
        <div id="content"/>
    </body>
    <script type="text/javascript" src="http://localhost:3000/dist/app.js">
    </script>
</html>

现在开始吃肉。我的 webpack.config.js 看起来像这样

// Generated using webpack-cli http://github.com/webpack-cli
const path = require('path');
const webpack = require("webpack");

module.exports = {
    mode: 'development',
    entry: './src-js/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js',
    },
    devServer: {
        open: true,
        host: 'localhost',
        port:3000
    },
    externals: {
        'react': 'React'
    },
    module: {
        rules: [
            {
                test: /\.js|jsx$/,
                loader: 'babel-loader',
                options: {
                    presets: [
                        '@babel/preset-env',
                        '@babel/preset-react',
                    ]
                }
            },
            {
                test: /\.css$/i,
                use: ['style-loader','css-loader'],
            },
            {
                test: /\.s[ac]ss$/i,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
                type: 'asset',
            },

            // Add your rules for custom modules here
            // Learn more about loaders from https://webpack.js.org/loaders/
        ],
    },
};

我的 ./src-js/app.js 看起来像这样。

import * as ReactDOM from "react-dom";

ReactDOM.render(<h1>Hello, world</h1>, document.getElementById('content'));

我后来将 app.js 修改成这样

import * as React from 'react';
import * as ReactDOM from 'react-dom'

class Component extends React.PureComponent {
    constructor(props) {
        super(props);
    }

    render() {
        return <h1>Hello, world</h1>
    }
}

ReactDOM.render(<Component/>, document.getElementById('content'));

这现在有效，但从长远来看，我更喜欢不需要从这个文件中导入 React 并将所有东西都包装在一个组件中。

在 app.js 顶部添加 import React from 'react' 没有效果，var React = require('react') 也没有效果。我假设我只是在 webpack 配置中遗漏了一些东西，但我似乎找不到什么，有人知道为什么会这样吗？

Answer 1

在 webpack 文档 (https://webpack.js.org/configuration/externals/) 中，冒号前似乎没有引号：

externals: {
    react: 'React'
},

在下面的几行 (https://webpack.js.org/configuration/externals/#object) 中，您可以找到小写的 react：

externals: {
    react: 'react'
},

为什么我得到 Uncaught ReferenceError: React is not defined？

1 个答案: