Webpack 没有捆绑在依赖 JS 文件中导入的节点模块

Question

我正在使用 Webpack 来捆绑我的 ReactJS 应用程序。

helloworld.js

import React from 'react';

export default class HelloWorld extends React.Component {
    render() {
        return <h2>Hello {this.props.name}!</h2>;
    }
}

index.js

import ReactDOM from 'react-dom';
import HelloWorld from './helloworld';

ReactDOM.render(<HelloWorld name="World" />,
    document.getElementById('container'));

webpack.config.js

module.exports = {
    entry: './index.js',
    output: 'bundle.js',
    module: {
        loaders: [
            {
                test: /(\.js|\.jsx)/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};

当我运行 webpack-dev-server --progress --colors 我在浏览器中遇到错误 "React is not defined" 但是如果我直接在 [= =36=] 那么错误就不会出现了。 如果 helloworld.js 文件中引用了 React，为什么 Webpack 不将 React 包含在包中？

Answer 1

好吧，webpack 只是尝试通过读取其中的依赖项并解析它们以呈现特定元素来捆绑各个模块。现在捆绑

ReactDOM.render(<HelloWorld name="World" />,
    document.getElementById('container'));

ReactDOM 尝试执行 React.createElement(_Helloworld2.default, { name: 'World' }), document.getElementById('app') 函数，该函数需要 React 作为 index.js 文件中不存在的依赖项，因此当您 import React 在你的 index.js 文件。希望我能解释清楚，我的回答对你有帮助。

Answer 2

您缺少 import React from 'react'; 声明。每次在文件中编写一些 JSX 时都需要它，因为它被转换为 React.createElement(..) 函数调用。

Webpack 没有捆绑在依赖 JS 文件中导入的节点模块

Webpack not bundling node modules imported in dependency JS files

reactjs

webpack

webpack-dev-server