Webpack: Как загрузить необработанный HTML как React JSX?

Question

Я использую Webpack и React JSX. У меня есть раздел, посвященный моему приложению, в котором много статического контента, который приходит от дизайнеров. Обычно они отправляют мне HTML-файл с содержимым, которое мне нужно публиковать.

В настоящее время я вручную конвертирую эти HTML в JSX (путем опасного определения HTML).

Вопрос: Есть ли в Webpack загрузчик, который будет автоматически конвертировать файлы HTML в React JSX?

Answer 1

Пожалуйста, обратитесь к html-jsx-loader, чтобы автоматически конвертировать необработанные HTML в React JSX с помощью Webpack.

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.