Question

我的应用包含不同的模块，moduleA，moduleB和moduleC。这些内容将作为dependencies包含在我的应用的package.json中。

所有这些组件都包含一些常见脚本，react，react-dom，lodash等。

webpack配置什么是单独构建这些模块然后在我的应用程序中需要它们？我对webpack doc。

非常困惑

尝试1：使用外部

我定义了一个common模块index.js包含：

require('react');
require('react-dom');
require('redux');
require('react-redux');
require('moment');
require('lodash');

然后配置文件暴露了这些：

module: {
        loaders: [{
                test: require.resolve("react"),
                loader: "expose?React"
            },
            ...

然后在任何其他文件之前包含此common.js。然后在每个模块中，使用externals我有：

externals: {
    "react": "React",
    "react-dom": "ReactDom",
    ...
},

问题

如果我在任何模块中使用import React from 'react'，则会导入react的新实例，从而导致不一致问题和最终addComponentAsRefTo错误。

但是，我可以完全使用React，因为它是全球可用的。

尝试2：CommonsChunkPlugin

仍然从顶部包含common.js。但是对于每个模块，这次使用vendors：

entry: {
    "app": "./src/myentry.jsx",
    "vendor": ["react", "react-dom"]
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity)
]

问题

每个模块都会创建自己的供应商文件。然后我如何组合所有供应商文件？

Answer 1

如果您想使用远程或cdn react react-dom etc文件，为什么需要在common.js中使用它们。如你所知CMD，如果你的common.js文件需要

require('react');
require('react-dom');
require('redux');
require('react-redux');
require('moment');
require('lodash');

然后变量React, ReactDom不是golbal变量。你不能在你的其他文件中访问它。你可以这样做：

window.React = require('react');
window.ReactDom = require('react-dom');
window.Redux = require('redux');
window.ReactRedux = require('react-redux');
window.monment = require('moment');
window.lodash = require('lodash');

并将这样的srcript标记插入到您的html <srcipt src="/common.bunld.js">中只需确保您的webpack条目中包含common.js。

Answer 2

我认为有两种方法：

1）从CDN和你的包中分别加载反应/反应：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script src="app.js"></script>

这样，你不应该导入反应（它已经加载并全局暴露）。例如，ReactDOM.render应该可以正常工作。如果你导入，你将在你的包中加载另一个React实例（来自./node_modules），这将引发错误并增加你的包大小。

2）第二个选项（我使用的）是配置webpack以创建公共/供应商包：

entry: {
    "app: "./src/myentry.jsx",
    "vendor": ["react", "react-dom"]
},

output: {
    filename: "[name].js"
},

plugins: [
    new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity)
]

Webpack会正确分隔代码并生成app.js和vendor.js。然后你应该在页面上加载它们：

<script src="vendor.js"></script>
<script src="app.js"></script>

不应导入Webpack外部

2 个答案: