0

私のプロジェクトでは、合理的な方法でts-loaderを利用してantdをロードする必要があります。次のエラーが表示されます。

✖ ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[0].use should be one of these:
   non-empty string | function | object { loader?, options?, ident?, query? } | function | [non-empty string | function | object { loader?, options?, ident?, query? }]
   -> Modifiers applied to the module when rule is matched
   Details:
    * configuration.module.rules[0].use should be a string.
    * configuration.module.rules[0].use should be an instance of function

問題のコードは次のとおりです。

const getTsLoaderRule = env => {
  const rules = [
    { loader: 'cache-loader' },
    {
        loader: 'thread-loader',
        options: {
            // there should be 1 cpu for the fork-ts-checker-webpack-plugin
            workers: require('os').cpus().length - 1
        }
    },
    {
      test: /\.(jsx|tsx|js|ts)$/,
      loader: 'ts-loader',
      options: {
        transpileOnly: true,
        getCustomTransformers: () => ({
          before: [ tsImportPluginFactory( {/*plugin to load antd library*/
            libraryName: 'antd',
            libraryDirectory: 'lib',
            style: true
          }) ]
          }),
          compilerOptions: {
            module: 'es2015'
          }
        },
        exclude: /node_modules/
    },
  ];
  if (env === 'development') {
    rules.unshift({
      loader: 'react-hot-loader/webpack'
    });
  }
  return rules;
};

ts-loader でプラグインを正しくロードするにはどうすればよいですか? 編集ライブラリを動的にロードできるようにするには、次のように ts-loader プラグイン オプションを含める必要があります。

transpileOnly: 真、

getCustomTransformers: () => ({
  before: [ tsImportPluginFactory( {/*plugin to load antd library*/
    libraryName: 'antd',
    libraryDirectory: 'lib',
    style: true
  }) ]
  }),
  compilerOptions: {
    module: 'es2015'
  }
}

詳細はこちら。

4

1 に答える 1

1

ここで基本的な構成ファイルを使用するか、次のコードを使用してください。

const path = require('path'); module.exports = {
    entry: './src/index.ts',
     module: {
             rules: [{
                 test: /\.tsx?$/,
                 use: 'ts-loader',
                 exclude: /node_modules/
             }
            ],
         },
    resolve: {
             extensions: ['.tsx', '.ts', '.js']
         },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    } }
于 2018-07-09T13:50:55.337 に答える