导出 Webpack 捆绑文件中的所有反应组件并在 html 文件中使用答案

【问题标题】：Export all react components in Webpack bundle file and use in html file导出 Webpack 捆绑文件中的所有反应组件并在 html 文件中使用
【发布时间】：2019-08-01 20:26:42
【问题描述】：

我有一些 React 组件，我想创建一个包含它们的包文件并在另一个 HTML 文件中使用它。

我做了什么：我创建了一个 Webpack 配置文件，它在 /src 文件夹中获取 index.js 作为入口文件，并生成一个像 components.js 这样的包文件

我导出 /src/index.js 文件中的所有组件，我想在与 Webpack 捆绑后所有组件都可以访问

我在 Webpack 中使用 External key 仅从我的源代码生成捆绑文件，而不是外部库

最后我将 react 和 bundle 文件脚本放在 HTML 文件中，我想将它们用作纯 javascript 函数。

<html>
  <head>
    <title></title>
  </head>
  <body>
    <header id="headerContent"></header>
    <section id="newsContent"></section>
    <section id="categoryContent"></section>
    <footer id="footerContent" ></footer>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

    <script type="text/javascript" src="components.js"></script></body>

    <script>
        ReactDOM.render(React.createElement(HeaderComponent), document.getElementById("headerContent"))
        ReactDOM.render(React.createElement(NewsComponent), document.getElementById("newsContent"))
        ReactDOM.render(React.createElement(NewsComponent), document.getElementById("categoryContent"))
        ReactDOM.render(React.createElement(FooterComponent), document.getElementById("footerContent"))
    </script>
  </body>
</html>

但它不起作用。我有什么问题吗？最好的解决方案是什么？ Webpack 配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  externals: {
    // Don't bundle the 'react' npm package with the component.
    'react': 'React',
    'react-dom' : 'ReactDOM'
  }
}

【问题讨论】：

你能提供你的 webpack 配置吗？
@Sylvain 我提供了它。请看一看。
是否还有配置（动态生成或其他）？您似乎没有输入和输出。你的“components.js”文件生成了吗？
我认为 Webapck 的默认条目是 src。另外，它还没有完成，顺其自然。我认为我应该使用另一个 Webpack 加载器来公开所有可在 HTML 原始文件中使用的组件。
没错，默认入口是 ./src/index.js 。但是，默认输出似乎是 ./dist/main.js （而不是 components.js）你能提供 index.js 的（如果太长的话是相关的）内容吗？

标签： javascript reactjs webpack

【解决方案1】：

简单的方法是将组件分配给窗口对象中的变量。这样一来，Webpack 的配置就不用改了。

window.HeaderComponent = HeaderComponent

我们可以在其他 HTML 文件中使用组件。

   <script>
        ReactDOM.render(React.createElement(window.HeaderComponent), document.getElementById("headerContent"))
        ReactDOM.render(React.createElement(window.NewsComponent), document.getElementById("newsContent"))
        ReactDOM.render(React.createElement(window.NewsComponent), document.getElementById("categoryContent"))
        ReactDOM.render(React.createElement(window.FooterComponent), document.getElementById("footerContent"))
    </script>

【讨论】：