使用Webpack的dependOn时出现ReferenceError问题求助

你误解了dependOn的作用——它只是用来拆分代码，把react、react-dom打包到独立的reactVendors chunk里，让home入口共享这个公共依赖，避免重复打包、优化缓存，但并不会自动把这些库挂载成全局变量，也不会省略模块引入的步骤。所以你删掉import后，代码里的ReactDOM自然找不到定义，就会报错。

给你两个可行的解决办法：

办法一：恢复import声明（推荐） #

这是符合ES模块规范的标准做法，dependOn依然能发挥代码拆分的作用，只是模块引入不能省略：

修改index.js：

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

ReactDOM.render(<p>Hello</p>, document.getElementById('demo'));

办法二：用ProvidePlugin自动注入全局变量 #

如果确实不想写import，可以通过Webpack的ProvidePlugin把react和react-dom自动注入到模块作用域，让代码里直接能用：

修改webpack.config.js：

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        reactVendors: ['react', 'react-dom'],
        home: { import: path.join(__dirname, 'src', 'index.js'), dependOn: 'reactVendors' }
    },
    plugins: [
        new webpack.ProvidePlugin({
            React: 'react',
            ReactDOM: 'react-dom'
        })
    ]
}

此时你的index.js不用写import也能正常运行。

内容的提问来源于stack exchange，提问作者Zack