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

Question

在经历了太多不成功的试验后,我的问题是:设置Webpack的正确方法是什么:

1. 使用react.min.js + react-dom.min.js - 而不是npm安装的源
2. 不要再次解析它们,只是捆绑我自己的组件.
3. 可以在所有.jsx文件中使用"React"和"ReactDOM"变量.

我找到的教程和指南不起作用 - 或者我做了一些错误.通常我在浏览器开发人员工具中遇到有关缺少变量React的错误.

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

最新React版本的任何想法？

Answer 1

假设你有一个webpack.config.js看起来像这样的东西:

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

您只需要指定React和ReactDOM作为外部依赖项(来自文档):

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部分的关键点是键是要引用的模块的名称,值是库在<script>标记中使用时公开的变量的名称.

在此示例中,使用以下两个脚本标记:

<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解析.因此,您不能使用依赖项.这对预先打包的库可能很有用.

对于例如:

{
    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的两条路径.