Webpack加載器JSX字符串到JSX

Question

我放了一個小的加載器，以便當我需要html文件時，將使用此Htmltojsx轉換器獲得JSX作為回報。

不幸的是，由於加載器僅返回一個字符串，所以我的加載器崩潰了。 我可以從加載程序驗證我得到的字符串是預期的：

import bodyHtml from './landing-body.html';

   const Landing = () => (
       <React.Fragment>
          <h3> Landing Page </h3>
          bodyHtml
          ...

然后，Webpack構建因此類錯誤而崩潰：

ERROR in ./Landing/landing-body.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <div>
|   <h5 className="product__title"> Your Product Name </h5>

也許我需要放入另一個加載器，以將其從字符串轉換為原始JSX輸出？

Answer 1

弄清楚了！

由於第一個加載器僅返回JSX字符串，因此還有更多的轉譯工作要做。

我需要使用的是webpack的“加載程序鏈接”

因此，最終我的html規則如下所示：

{   
            test: /\.html$/,
            exclude: /node_modules/,
            use: [
                {   
                    loader: 'babel-loader'
                },  
                {   
                    loader: path.resolve(__dirname, 'loaders/html-loader.js')
                }   
            ]
        }

可以這么說，我想鏈式加載器是以“反向順序”完成的，因此html加載器首先將其轉換為JSX字符串，然后babel-loader將其視為JSX代碼。