Webpack：如何加载原始超文本标记语言作为反应JSX？

Question

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

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

问题：Webpack中是否有一个加载程序可以自动将HTML文件转换为React JSX？

Answer 1

请参考html jsx加载程序，使用Webpack自动将原始html转换为React jsx。

1-将html jsx加载程序添加到您的网页包配置中：

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

现在，您可以编写原始的超文本标记语言（例如。ntroduction.htm），webpack将自动将此文件的内容转换为React组件。

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

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

//Introduction is not HTML but ReactJS class.