share_this_document - Excluir reaccionar del paquete de webpack

webpack png loader

Question

Estoy tratando de excluir reaccionar de mi paquete que se genera mediante el paquete web. Por lo que respecta a la razón, tenemos una versión global de reaccionar disponible en la página, así que la usaré.

He intentado utilizar el siguiente, como se sugiere aquí, el paquete web y las bibliotecas externas, pero parece que esto no funciona. Puedo ver que el paquete web exportó React pero aún aparece en el paquete.

externals: {
''react'': ''React''
}

Estaba pensando que podría ser otra dependencia, por ejemplo, react-router importando reaccionar? ¿Alguien ha logrado hacer esto?

Answer 1

Tuve el mismo problema que tú. Estuve atascado por una noche, encontré la respuesta, react-dom requiere react/lib/ReactDOM , que aún incluye react en el paquete. La solución se ve así:

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

A continuación, agregue react-dom a la etiqueta de secuencia de comandos en su página.

Answer 2

Puede simplemente crear múltiples entradas para reaccionar por separado de su paquete de aplicaciones. Por ejemplo, puede hacer lo siguiente, utilizando el paquete web CommonsChunkPlugin:

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

Answer 3

configuración de webpack :

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

agréguelos a la parte inferior de index.html body.

<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>

y, en su archivo de entry , tal vez 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'')
);