1、问题由来
react+typescript
项目中,为了方便文件引入,我们常常配置webpack.resolve.alias
来简化路径,组件的引入就可以使用别名。当我们执行构建时会报如下错误:
这是因为ts-loader
在编译tsx
文件时,会根据tsconfig.json
中的路径映射引入组件,而项目中没有在tsconfig.json
中配置路径映射,页面文件中又使用了路径别名,从而导致上述问题。
如果我们在tsconfig.json
中配置了路径映射,不配置webpack.resolve.alias
,会有什么问题吗?我们来看一看构建之后的情况:
可以看出在webpack
构建时报错找不到模块。
解决上面问题有以下几种方式:
- 在
tsconfig.json
和webpack.resolve.alias
中都配置路径映射。 - 使用
awesome-typescript-loader
代替ts-loader
,因为awesome-typescript-loader
中提供TsConfigPathsPlugin
插件,该插件可以将tsconfig.json
中的路径映射copy
到webpack.resolve.alias
中,我们只需要在tsconfig.json
中配置路径映射即可。 - 使用自定义
webpack
插件,实现将tsconfig.json
路径映射copy
到webpack.resolve.alias
中。
2、别名设置
2.1、tsconfig.json和webpack.resolve.alias都配置
webpack.module
module: {
rules: [
{
test: /\.ts(x)$/,
exclude: /node_modules/,
loader: ['babel-loader', 'ts-loader'],
},
],
}
webpack.resolve
resolve: {
extensions: ['.tsx', 'ts', '.js', '.json'],
alias: {
'@src': resolve('./src'),
},
},
tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@src/*": ["./src/*"],
},
}
2.2、awesome-typescript-loader代替ts-loader
webpack.module
module: {
rules: [
{
test: /\.ts(x)$/,
exclude: /node_modules/,
loader: ['babel-loader', 'awesome-typescript-loader'],
},
],
},
webpack.resolve
开头引入TsConfigPathsPlugin
const { TsConfigPathsPlugin } = require('awesome-typescript-loader')
resolve: {
extensions: ['.tsx', 'ts', '.js', '.json'],
plugins: [
new TsConfigPathsPlugin()
],
},
重要提示:此插件需要进入文件的resolve / plugins
部分,而不是根级“插件”部分!如果您将解析器插件放在错误的位置,您将收到此错误:
resolver.ensureHook is not a function
tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@src/*": ["./src/*"],
},
}
2.3、自定义webpack插件解决路径映射
这里提供一个可用的插件AliasPlugin
:https://github.com/webpack/en...
以及使用方式:
resolve: {
plugins: [
new TsConfigAliasPlugin("described-resolve", "resolve")
]
}
参考:
http://www.voidcn.com/article...
https://github.com/s-panferov...
http://hk.voidcc.com/question...
http://www.gaofeiyu.com/blog/...
https://www.cnblogs.com/cczlo...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。