Webpack：如何將原始HTML加載爲React JSX？

Question

我正在使用Webpack和React JSX。我有一個關於我的應用程序的部分，其中有很多來自設計師的靜態內容。他們通常會向我發送一個HTML文件，其中包含我需要發佈的內容。

目前，我手動將這些HTML轉換爲JSX（通過危險地設置HTML）。

問題：在Webpack中是否有一個加載器會自動將HTML文件轉換爲React JSX？

Answer 1

請參閱html-jsx-loader使用Webpack自動將原始HTML轉換爲React JSX。

1 - 的HTML的JSX裝載機添加到您的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.