Webpack通过“模块解析失败，带有意外的令牌”

Question

我收到Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type.错误，尽管我已经将webpack.js配置为可以处理ts / tsx文件，并且在导入{{1 }}在environment-dev.ts文件中。

有人知道这是什么问题吗？非常感谢所有帮助。

错误：

./src/service/transport-service.ts

最小化的应用程序结构

ERROR in ./src/services/transport-service.ts 5:24
Module parse failed: Unexpected token (5:24)
You may need an appropriate loader to handle this file type.
| import env from '../../environment-dev';
|
> export default abstract class TransportService {
|   private static getCompleteUrl(endpoint: string): string {
|       return env.baseUrl + env.prefix + endpoint;
 @ ./src/services/post-service.tsx 3:28-58
 @ ./src/pages/Post/index.tsx
 @ ./src/routes.tsx
 @ ./src/pages/Main/index.tsx
 @ ./src/components/app/index.tsx
 @ ./src/index.tsx

package.json devDependencies：

├── environment-dev.ts
├── package.json
├── src
│   ├── services
│       └── transport-service.ts
├── tsconfig.json
├── tslint.json
├── webpack.config.js
└── yarn.lock

webpack.js：

"devDependencies": {
  "@babel/core": "^7.0.0-rc.1",
  "@babel/plugin-transform-typescript": "^7.0.0-rc.1",
  "@babel/preset-env": "^7.0.0-rc.1",
  "@babel/preset-react": "^7.0.0-rc.1",
  "@commitlint/cli": "^7.0.0",
  "@commitlint/config-conventional": "^7.0.1",
  "@types/react": "^16.4.12",
  "@types/react-dom": "^16.0.7",
  "@types/react-router-dom": "^4.3.0",
  "awesome-typescript-loader": "^5.2.0",
  "babel-loader": "^8.0.0-beta",
  "commitizen": "^2.10.1",
  "commitlint": "^7.0.0",
  "css-loader": "^1.0.0",
  "cz-customizable": "^5.2.0",
  "extract-text-webpack-plugin": "4.0.0-beta.0",
  "html-webpack-plugin": "^3.2.0",
  "husky": "^0.14.3",
  "node-sass": "^4.9.3",
  "sass-loader": "^7.1.0",
  "source-map-loader": "^0.2.4",
  "standard-version": "^4.4.0",
  "style-loader": "^0.22.1",
  "tslint": "^5.11.0",
  "tslint-config-airbnb": "^5.11.0",
  "tslint-loader": "^3.6.0",
  "tslint-react": "^3.6.0",
  "typescript": "^3.0.1",
  "webpack": "^4.16.5",
  "webpack-cli": "^3.1.0",
  "webpack-dev-server": "^3.1.5"
}

transport-service.ts：

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.tsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer: {
        contentBase: path.resolve(__dirname, "dist"),
        port: 3000,
        open: true
    },
    resolve: {
        extensions: [
            '.ts',
            '.tsx',
            '.js'
        ]
    },
    module: {
        rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        '@babel/preset-env', 
                        '@babel/preset-react'
                    ]
                }
            }
        },
        {
            test: /\.ts?x$/,
            enforce: "pre",
            loader: 'tslint-loader'
        },
        {
            test: /\.ts?x$/,
            loader: 'awesome-typescript-loader'
        },
        {
            enforce: 'pre',
            test: /\.js$/,
            loader: 'source-map-loader'
        },
        {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    'css-loader',
                    'sass-loader'
                ]
            })
        }
    ]},
    plugins: [
        new HtmlWebPackPlugin({
            template: './src/index.html',
            filename: './index.html'
        }),
        new ExtractTextPlugin('style.css')
    ]
};

environment-dev.ts：

import axios from 'axios';

import env from '../../environment-dev';

export default abstract class TransportService {
    private static getCompleteUrl(endpoint: string): string {
        return env.baseUrl + env.prefix + endpoint;
    }

    public static get(url: string, params: any = {}): Promise<any> {
        return axios.get(this.getCompleteUrl(url), { params });
    }

    public static post(url: string, body: any = {}, params: any = {}): Promise<any> {
        return axios.post(env.baseUrl, body, { params });
    }

    public static put(url: string, body: any = {}, params: any = {}): Promise<any> {
        return axios.put(env.baseUrl, body, { params });
    }

    public static delete(url: string, params: any = {}): Promise<any> {
        return axios.delete(env.baseUrl, { params });
    }
}

Answer 1

在test: /\.ts?x$/中，您似乎把问号放在错误的位置，并且该模式与.ts扩展名不匹配。尝试将其替换为test: /\.tsx?$/。