无效的配置对象答案

【问题标题】：Invalid configuration object无效的配置对象
【发布时间】：2018-07-09 12:56:07
【问题描述】：

在我的项目中，我需要使用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'
  }
}

更多详情here.

【问题讨论】：

标签： typescript webpack antd ts-loader

【解决方案1】：

只需使用基本配置文件here 或使用以下代码：

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'
    } }

【讨论】：