相关疑难解决方法(0)

我目前正在解决使用别名正常工作的问题.根据我的理解,要使用webpack使别名正常工作,您必须:

版本

  "typescript": "2.8.3",
  "webpack": "4.16.2",
  "webpack-cli": "3.1.0",
  "awesome-typescript-loader": "5.2.0",
  "html-webpack-plugin": "3.2.0",
  "source-map-loader": "^0.2.3",

1. 将tsconfig中的别名定义为路径.我通过构建它验证了我的tsconfig和路径/别名是正确的.如果配置不正确,则构建失败.

这是示例文件

Sample.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Footer from '@common/Footer';

export default class Sample{

    public static page(): void {
        ReactDOM.render(<Footer/>,
            document.getElementById('footer')
        );
    }
}

使用webpack,它被配置为使用awesome-typescript-loader.据我了解,它利用TsConfigPathsPlugin来检查所有别名的tsconfig,然后解决它.所以当它到达webpack时,别名已经解决了.但事实并非如此.在bundle.js中,我希望看不到任何@common或任何别名,并且它会被转换.

我还添加了尝试直接在webpack中解析别名以及解析中的别名/ aliasFields.但仍然没有运气.

webpack.js

 const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const webpack = require('webpack');
    const fs = require('fs');
    const TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPlugin;
    const ROOT_DIR = path.resolve(__dirname, ".","..");

    const config = { …