Question

经过多次不成功的试验后，我的问题是：设置Webpack的正确方法是什么，以便：

使用react.min.js + react-dom.min.js - 而不是npm已安装的来源
不要再次解析它们，只需捆绑我自己的组件。
＆＃34;阵营＆＃34;和＃34; ReactDOM＆＃34;变量可以在所有.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部分的关键点是密钥是您要引用的模块的名称，而值是变量的名称库在＆lt; script＆gt;中使用时公开标签。

在此示例中，使用以下两个脚本标记：

<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的值，而不是捆绑您的输出。< / p>

但是，为了执行此操作，包含您的包的页面必须包含引用的库（在本例中为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上的路径。

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

1 个答案: