如何使用 Webpack 配置缩小的 React+ReactDOM

Question

经过太多不成功的试验，我的问题是：设置 Webpack 的正确方法是什么，这样：

1. 使用 react.min.js + react-dom.min.js - 而不是 npm 安装源
2. 不要再次解析/com它们，只需与我自己的组件捆绑即可。
3. “React”和“ReactDOM”变量可用于所有 .jsx 文件。

我发现的教程和指南不起作用 - 或者我可能犯了一些错误。通常我在浏览器开发工具中收到关于缺少变量 React 的错误。

我的目标只是节省解析/捆绑时间。现在我每次打包我的应用程序时都会从头开始解析 React。在速度较慢的计算机上需要几十秒。在手表模式下它更快，但我发现我在做不必要的工作。

对最近的 React 版本有什么想法吗？

Answer 1

假设您有一个看起来像这样的webpack.config.js：

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            ...
        ]
    }
};

您只需将React 和ReactDOM 指定为外部依赖项（from the docs）：

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            ...
        ]
    },
    externals: {
        // "node/npm module name": "name of exported library variable"
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

关于externals部分的关键点是key是你要引用的模块的名字，value是库暴露的变量的名字在 。

在本例中，使用以下两个脚本标签：

<script src="https://fb.me/react-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>

导致创建两个顶级变量：React 和 ReactDOM。

使用上面的externals 配置，任何时候在您的源代码中都有require('react')，它将返回全局变量React 的值，而不是与您的输出捆绑反应。

但是，为了做到这一点，包含您的捆绑包的页面必须包含引用的库（在本例中为 react 和 react-dom）之前包括您的捆绑。

希望有帮助！

---

*编辑*

好的，我明白你要做什么了。你想要的 webpack 配置选项是module.noParse。

这会禁用 webpack 的解析。因此，您不能使用依赖项。这对于预打包的库可能很有用。

对于example：

{
    module: {
        noParse: [
            /XModule[\\\/]file\.js$/,
            path.join(__dirname, "web_modules", "XModule2")
        ]
    }
}

所以你会在某个文件夹中拥有你的react.min.js、react-dom.min.js 和jquery.min.js 文件（比如./prebuilt），然后你会像任何其他本地模块一样需要它们：

var react = require('./prebuilt/react.min');

webpack.config.js 中的条目看起来像这样（未经测试）：

{
    module: {
        noParse: [
            /prebuilt[\\\/].*\.js$/
        ]
    }
}

[\\\/] 混乱用于在 Windows 和 OSX/Linux 上匹配路径。