Typescript 无效的配置对象
在我的项目中,我需要使用一种合理的方式来加载。我得到以下错误:Typescript 无效的配置对象,typescript,webpack,antd,ts-loader,Typescript,Webpack,Antd,Ts Loader,在我的项目中,我需要使用一种合理的方式来加载。我得到以下错误: ✖ 「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 | fu
✖ 「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'
}
}
更多详细信息。只需使用基本配置文件或使用以下代码即可:
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'
} }