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组件。但是，当我插入加载程序时，它不再能够正确编译。它只是简单地返回反应代码不变。我希望它可以编译加载程序返回的代码。

Answer 1

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

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

如何创建仍可正确编译我的React代码的自定义Webpack加载程序？

1 个答案: