Webpack：你可能需要一个合适的加载器来处理这个文件答案

【问题标题】：Webpack: You may need an appropriate loader to handle this fileWebpack：你可能需要一个合适的加载器来处理这个文件
【发布时间】：2018-05-03 17:04:00
【问题描述】：

我正在使用 awesome-typescript-loader 使用 webpack 设置 typescript。但是 webpack 在构建时给了我这个错误：

./src/logic/Something.ts 中的错误

模块解析失败：意外 token (2:19) 你可能需要一个合适的加载器来处理这个文件输入。

这是来自webpack.config.js的一段代码：

module: {
        loaders: [
            {
                test: /\.(js|jsx)?$/,
                loader: "babel-loader",
                exclude: /node_modules/
            },
            {
                test: /\.(ts|tsx)?$/,
                loader: "awesome-typescript-loader",
                exclude: /node_modules/
            },
            {
                test: /\.(css|less)?$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader?modules&localIdentName=[local]--[hash:base64:5]"
                }, {
                    loader: "less-loader"
                }]
            },
            {
                test: /\.json$/,
                exclude: /node_modules/,
                loader: 'json-loader'
            }
        ]
    },
    resolve: {
        extensions: [".js", ".jsx", ".ts", ".tsx", ".css", ".less"]
    }

和tsconfig.json:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "module": "commonjs",
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "jsx":  "react" 
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

更新

Something.ts文件：

class Something {
    constructor(str: string) {
        console.log(str);
    }
}

export { Something };

您对问题可能出在哪里有任何想法？谢谢！

【问题讨论】：

Something.ts的内容是什么？您可能正在导入您尚未在 webpack 配置中定义的内容。
这是一个超级简单的 .ts 文件，我只是想让它工作，请看更新
你使用的是哪个版本的 webpack？
来自 package.json 文件："webpack": "^3.8.1"
好吧酷，你试过这个语法吗：{ test: /\.(ts|tsx)?$/, use: { loader: "awesome-typescript-loader" }, exclude: /node_modules/ } webpack v3 似乎需要这种语法。

标签： javascript typescript webpack

【解决方案1】：

webpack v3 需要使用use 而不是直接编写loader 规则来加载loaders。

不如这样做：

 {
    test: /\.(ts|tsx)?$/,
    use: {
      loader: 'awesome-typescript-loader'
    },
    exclude: /node_modules/
 }

【讨论】：