0

我正在尝试构建一个自定义加载器以在我的 NWB 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 配置正确编译了我的反应组件。但是，当我插入加载程序时，它不再正确编译它。它只是简单地返回反应代码不变。我希望它编译我的加载程序返回的代码。

4

1 回答 1

0

我只需要返回源而不对其进行字符串化：

export default function(source) {
  // Do nothing
  return source;
}
于 2019-05-03T21:19:02.487 回答