Webpack：如何将原始 HTML 加载为 React JSX？

【问题标题】：Webpack: How to load raw HTML as React JSX?Webpack：如何将原始 HTML 加载为 React JSX？
【发布时间】：2015-06-04 03:08:36
【问题描述】：

我正在使用 Webpack 和 React JSX。我的应用程序中有一个部分，其中包含大量来自设计师的静态内容。他们通常会向我发送一个 HTML 文件，其中包含我需要发布的内容。

目前，我正在手动将这些 HTML 转换为 JSX（通过危险地设置 HTML）。

问题：Webpack 中是否有自动将 HTML 文件转换为 React JSX 的加载器？

【问题讨论】：

标签： javascript html reactjs react-jsx webpack

【解决方案1】：

请参考html-jsx-loader 使用 Webpack 自动将原始 HTML 转换为 React JSX。

1 - 将 html-jsx-loader 添加到您的 Webpack 配置中：

{
    ...
    module: { 
        loaders: [
            { test: /\.htm$/, loader: 'jsx-loader!imports?React=react!html-jsx-loader'}
        ]},
        resolve: {
            extensions: ['', '.js', '.htm']
        }
    }
    ...
}

现在您可以编写原始 HTML（例如 Introduction.htm），webpack 会自动将此文件的内容转换为 React 组件。

最后，您可以在 JavaScript 代码中引用该组件，如下所示：

var Introduction = require('./Introduction'); 

//Introduction is not HTML but ReactJS class.

【讨论】：