首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >从webpack捆绑包中排除react

从webpack捆绑包中排除react
EN

Stack Overflow用户
提问于 2015-10-16 00:55:39
回答 3查看 19.5K关注 0票数 38

我试图从我的捆绑包中排除react,该捆绑包由webpack生成。原因是,我们在页面上提供了react的全局版本,所以我将使用它。

我试过使用下面的方法,就像这里建议的那样,Webpack and external libraries,但这似乎不起作用。我可以看到webpack已经导出了React,但它仍然出现在捆绑包中。

代码语言:javascript
复制
externals: {
  'react': 'React'
}

我在想它可能是另一个依赖,比如react-router导入react?有没有人能做到这一点?

EN

回答 3

Stack Overflow用户

发布于 2016-03-05 14:51:41

我和你有同样的问题。被困了一晚,找到了答案,react-dom需要react/lib/ReactDOM,它仍然在捆绑中包含react。解决方案如下所示:

代码语言:javascript
复制
externals: {
 'react': 'react', // Case matters here 
 'react-dom' : 'reactDOM' // Case matters here 
}

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

票数 35
EN

Stack Overflow用户

发布于 2016-12-29 19:10:04

webpack配置:

代码语言:javascript
复制
externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'react-router': 'ReactRouter'
}

将这些添加到index.html主体的底部。

代码语言:javascript
复制
<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

代码语言:javascript
复制
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')
);
票数 17
EN

Stack Overflow用户

发布于 2015-12-01 21:02:11

您可以只创建多个条目来将react与您的应用程序捆绑包分开。例如,您可以使用webpack CommonsChunkPlugin执行以下操作:

代码语言:javascript
复制
module.exports = {
entry: {
    "app": "your app entry file",
    "react" : "react"
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin("react", "react.bundle.js")
   ]
}
票数 -3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33154285

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档