Question

我对webpack有以下配置（与grunt集成）：

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>。错误是＆＃39; ReactDOM未定义＆＃39;。我该如何克服这个问题？它在我合并react.jsx和index.jsx时有效，但仍然希望将它们分开来加速代码编译。

Answer 1

您的 index.jsx 只需要依赖react和react-dom来使代码正常工作。为了达到您想要的效果，您可以使用externals加载它们。您可以为生成p的目标设置类似的内容：

index

这样，webpack 就不会捆绑您的externals: { 'react': { commonjs: 'react', commonjs2: 'react', amd: 'React', root: 'React' }, 'react-dom': 'react-dom' },捆绑包做出反应和反应。

将代码分解为反应库包和组件包

1 个答案: