使用Webpack 4和Awesome-Typescript加载程序的别名不起作用 [英] Aliasing with Webpack 4 and awesome-typescript loader not working
问题描述
我目前在获取别名以正常工作方面遇到问题.据我了解，要使别名能够与Webpack一起正常使用，您必须:
I'm currently having issue getting aliasing to work properly. From my understanding, to get aliasing to work properly with webpack you have to:
版本
"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",
- 在tsconfig中将别名定义为路径.通过构建它，我验证了tsconfig和路径/别名是否正确.如果配置不正确，将会导致构建失败.
这是示例文件
Sample.tsx
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或任何别名，并且它们会被转换.
With webpack, it's configured to use awesome-typescript-loader. As I understand it, it leverages off the TsConfigPathsPlugin to examine the tsconfig for all the alias and then resolve it. So by the time it gets to webpack, the alias are already resolved. However, that isn't the case. In the bundle.js I would expect to not see any @common or any aliasing and that it would have been converted.
我还添加了尝试直接在webpack中解析别名以及解析中的alias/aliasFields的方法.但是仍然没有运气.
I also added tried to resolve the alias directly within webpack as well with the alias/aliasFields in the resolve. But still no luck.
webpack.js
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 = {
context: path.resolve(__dirname, '.',".."),
mode: "development",
resolve: {
modules: [
],
extensions: ['.ts', '.tsx', '.js', '.jsx'],
plugins: [
new TsConfigPathsPlugin({
configFileName: path.resolve(ROOT_DIR,'tsconfig.json')
})
],
aliasFields: ["@entry", "@common"],
alias: {
"@entry": "entry/",
"@common": "common/"
}
},
entry: {
entryPoint: path.resolve(ROOT_DIR,'entry, 'index.tsx')
},
optimization: {
minimize: false, // debugging purpose
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
},
output: {
filename: "[name]_bundle.js",
path: path.join(ROOT_DIR, 'dist_w'),
},
// Enable sourcemaps for debugging webpack's output.
devtool: "eval-source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.(ts|tsx)$/, loader: "awesome-typescript-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
plugins: [
//Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html', //Name of file in ./dist/
template: path.resolve(ROOT_DIR,'entry-point', 'index.html'),
hash: true,
})
],
stats: { //object
assets: true,
colors: true,
errors: true,
errorDetails: true,
hash: true
// ...
}
};
module.exports = config;
我从Web Pack中收到的错误消息是:
The error message I get from web pack is:
Module not found: Error: Can't resolve '@common\Footer' in 'entry\src'
resolve '@common\Footer' in 'entry\src'
Parsed request is a module
using description file: <root>\package.json (relative path: ./entry/)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
entry\node_modules doesn't exist or is not a directory
<root>\..\..\node_modules doesn't exist or is not a directory
<root>\..\node_modules doesn't exist or is not a directory
<root>\node_modules doesn't exist or is not a directory
looking for modules in <root>\node_modules
using description file: <root>\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
looking for modules in entry\node_modules
using description file: <root>\package.json (relative path: ./entry-point/node_modules)
Field 'browser' doesn't contain a valid alias configuration
using description file: <root>\package.json (relative path: ./node_modules/@common//Footer)
no extension
Field 'browser' doesn't contain a valid alias configuration
using description file: <root>\package.json (relative path: ./entry-point/node_modules/@common/Footer)
no extension
Field 'browser' doesn't contain a valid alias configuration
<root>\node_modules\@common\Footer doesn't exist
.ts
…
任何建议， 谢谢， D
Any advice appreciated, Thanks, D
推荐答案
这是我在我的一个项目中使用的方法，您必须在tsconfig和webpack.config中都对其进行配置，但是值是不同的:
This is what I used in one of my projects, you'll have to configure it in both tsconfig and webpack.config, but the values are different:
// webpack.config
resolve: {
extensions: [".ts", ".js"],
alias: { "@src": path.resolve(__dirname, "src") },
},
// tsconfig
"paths": {
"@src/*": ["./src/*"]
},
这篇关于使用Webpack 4和Awesome-Typescript加载程序的别名不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
