2015-10-15 35 views
18

反应我试图排除这是由产生的WebPack我捆反应。原因是,我们有一个全球版本的页面上可用的反应,所以我会使用。排除的WebPack束

我已经使用下面的尝试,这里Webpack and external libraries建议但这似乎并没有工作。我能看到的WebPack已远销反应,但它仍然 出现在捆绑。

externals: { 
    'react': 'React' 
} 

我在想这可能是另一个依赖,例如,反应路由器导入反应?有没有人设法做到这一点?

+0

也许这将有助于:https://github.com/webpack/webpack/issues/1275 – Kreozot

+0

见本相关的问题。 http://github.com/webpack/webpack.js.org/issues/1726 – cpxPratik

回答

0

您只需创建多个条目,以分开你的应用程序包的反应。你可以举例如下,使用webpack CommonsChunkPlugin:

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

我有和你一样的问题。被卡一晚,找到了答案,react-dom需要react/lib/ReactDOM,仍然包括在束react。解决方案是这样的:

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

在你的页面然后加入react-dom到脚本标签。

6

webpack配置:

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') 
);