Question

我试图排除webpack生成的包中的反应。原因是，我们在页面上提供了全局版本的反应，因此我将使用它。

我尝试使用下面的内容，如Webpack and external libraries所示，但这似乎不起作用。我可以看到webpack已经导出了React，但它仍然存在出现在捆绑中。

externals: {
  'react': 'React'
}

我在想它可能是另一种依赖，例如react-router导入反应？有没有人设法做到这一点？

Answer 1

我遇到了和你一样的问题。卡住了一晚，找到答案，react-dom需要react/lib/ReactDOM，其中仍然包含react。解决方案如下所示：

externals: {
 'react': 'react', // Case matters here 
 'react-dom' : 'reactDOM' // Case matters here 
}

然后将react-dom添加到您网页的脚本标记中。

Answer 2

webpack config：

externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'react-router': 'ReactRouter'
}

将这些添加到index.html正文的底部。

<script src="http://cdn.bootcss.com/react/15.4.1/react.js"></script>
<script src="http://cdn.bootcss.com/react/15.4.1/react-dom.js"></script>
<script src="http://cdn.bootcss.com/react-router/2.8.1/ReactRouter.js"></script>

并且，在您的entry文件中，可能是index.js：

var React = require('react');
var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');

const App = () => {
    return <div>
        webpack externals
    </div>
};

ReactDOM.render(
    <App/>,
    document.getElementById('container')
);

Answer 3

您可以创建多个条目以将响应与应用程序包分开。例如，您可以使用webpack CommonsChunkPlugin执行以下操作：

module.exports = {
entry: {
    "app": "your app entry file",
    "react" : "react"
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin("react", "react.bundle.js")
   ]
}

排除来自webpack bundle的反应

3 个答案: