如何創建仍然正確編譯我的反應代碼的自定義webpack加載器？

Question

我正在嘗試構建一個在我的NWB React項目中使用的自定義加載器。 我只是想創建一個什么也不做的自定義加載器，但是為我的react組件維護正確的編譯。 我似乎無法使加載器以正確的順序運行，即我的自定義加載器應該首先發生，然后應該編譯源代碼。

我已經成功運行了一個加載器，我已經嘗試將它設置為配置中的預加載器。 我也試過手動添加babel-loader的第二次傳遞，但是雖然它已經改變了已編譯的代碼，但它仍然沒有正確編譯react組件。

這是我的nwb.config.js：

module.exports = function({command}) {

  /* Set config */
  let config = {
    type: 'react-app',
  }

  config.webpack = {
    entry: {
      App: './src/components/App.js',
    }
    extra: {
      output: {
        path: path.resolve('./dist/webpack_bundles/'),
      },
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: path.resolve('./my-loader.js'),
            enforce: 'pre',
            options: {text: 'hello world'},
          }
        ]
      },
    },
  }
  return config
}

這是我的加載器的文本，主要借用webpack上的一個例子：

export default function(source) {
  // Do nothing
  return `export default ${ JSON.stringify(source) }`;
}

最后，這是我正在使用的來源：

import React, {Component} from 'react'

export default class App extends Component {
  render() {
    return <div className="App">
      <p>Hello World</p>
    </div>
  }
}

當我從webpack配置中刪除模塊部分時，nwb的默認webpack配置正確編譯了我的react組件。 但是，當我插入我的加載程序時，它不再正確編譯它。 它只是返回反應代碼不變。 我希望它能夠編譯我的loader返回的代碼。

Answer 1

我只需要返回源代碼而不進行字符串化：

export default function(source) {
  // Do nothing
  return source;
}