拆分反應代碼到反應庫束及組件捆綁

我爲的WebPack以下配置（與咕嚕積分）：拆分反應代碼到反應庫束及組件捆綁

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    run_webpack: { 
    entry: { 
     react: "./static/src/jsx/react.jsx", 
     index: "./static/src/jsx/index.jsx" 
    }, 
    output:{ 
     path: "./static/js/", 
     filename: "[name].bundle.js", 
    }, 
    module: { 
     loaders: [ 
     { 
      test: /.jsx?$/, 
      loader: 'babel-loader', 
      exclude: /node_modules/, 
      query: { 
      presets: ['es2015', 'react'] 
      } 
     } 
     ] 
    }, 
    }, 
};

我react.jsx和index.jsx：

// react.jsx 
var React = require('react'); 
var ReactDOM = require('react-dom'); 

// index.jsx 
ReactDOM.render(
    <h1>Hello, world!</h1>, 
    document.getElementById('app') 
);

而然後我將這些包嵌入到html中：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Kanban app</title> 
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
    <script type="text/javascript" src="{% static 'js/react.bundle.js' %}"></script> 
    <script type="text/javascript" src="{% static 'js/index.bundle.js' %}"></script> 
    </head> 
    <body> 
    <div id="app"></div> 
    </body> 
</html>

我的問題是它不會呈現<h1>Hello, world!</h1>。錯誤是'ReactDOM未定義'。我怎樣才能克服這個問題？它在我合併react.jsx和index.jsx時起作用，但仍希望單獨保留它們以加速代碼編譯。

來源

2016-03-28 AmirM

您的index.jsx只需取決於代碼的工作反應和反應dom。不過，爲了達到你想要的效果，你可以使用externals加載它們。你可以建立這樣的目標產生index：

externals: { 
    'react': { 
    commonjs: 'react', 
    commonjs2: 'react', 
    amd: 'React', 
    root: 'React' 
    }, 
    'react-dom': 'react-dom' 
},

這樣的WebPack 不會束反應，反應-DOM您index包。

來源

2016-03-28 10:18:37

拆分反應代碼到反應庫束及組件捆綁

回答

相關問題