Webpack4+TypeScript无法解析模块：Vue项目升级后构建报错

嘿，我看你升级Webpack到v4后碰到了这个头疼的模块解析问题——这个错误本质是Webpack没认出你在tsconfig里配置的路径别名，因为Webpack本身不会自动读取tsconfig的paths配置，再加上几个小配置细节没对齐，就导致了找不到模块的问题。我帮你整理了几个关键修复步骤：

1. 同步TypeScript路径别名到Webpack #

你的tsconfig里已经定义了@web/*指向./servers/web/vue-app/*，但Webpack的resolve.alias里只配了vue$，完全不知道@web是啥路径。这里有两种解决方式：

方式一：手动配置Webpack别名 #

直接在Webpack的resolve.alias里加上对应映射，和tsconfig保持一致：

resolve: {
  modules: ['node_modules'],
  extensions: [".js", ".ts", ".vue", ".json"], // 建议加上.json，避免一些隐性解析问题
  alias: {
    vue$: 'vue/dist/vue.esm.js',
    // 同步tsconfig里的paths映射
    '@utils': path.resolve(__dirname, '../src/utils'),
    '@src': path.resolve(__dirname, '../src'),
    '@web': path.resolve(__dirname, '../src/servers/web/vue-app'),
    '@shared': path.resolve(__dirname, '../src/servers/shared')
  },
},

方式二：用插件自动同步（更推荐，不用手动维护） #

用tsconfig-paths-webpack-plugin可以自动读取tsconfig的paths，转换成Webpack能识别的别名，省得以后改tsconfig还要同步Webpack：

• 先装插件：

npm install tsconfig-paths-webpack-plugin --save-dev

• 然后修改Webpack配置：

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  // ...其他配置
  resolve: {
    plugins: [new TsconfigPathsPlugin({ configFile: path.resolve(__dirname, '../tsconfig.json') })],
    modules: ['node_modules'],
    extensions: [".js", ".ts", ".vue", ".json"],
    alias: {
      vue$: 'vue/dist/vue.esm.js'
    },
  },
  // ...其他配置
}

2. 修正Entry路径的低级错误 #

你的Webpack配置里context已经设为path.resolve(__dirname, './../src')，意思是所有相对路径都会基于src目录，但你的main entry写的是"../src/servers/web/vue-app/index.ts"，这会让路径变成src/../src/servers/web/vue-app/index.ts，明显重复了！改成这样：

entry:{
  vendor: [
    'babel-polyfill',
    'braintree-web',
    // ...其他vendor依赖
  ],
  main: "./servers/web/vue-app/index.ts", // 去掉前面的../src，context已经帮你定位到src了
},

3. 优化TS-loader的配置细节 #

确保ts-loader能正确处理Vue文件里的TypeScript，顺便优化下构建速度：

{
  test: /\.ts$/,
  exclude: /node_modules/,
  use: [{
    loader: "babel-loader",
    options: {
      presets: ["@babel/preset-env"]
    },
  }, {
    loader: 'ts-loader',
    options: {
      appendTsSuffixTo: [/\.vue$/], // 这里正则要加$，精确匹配.vue文件，避免误匹配
      transpileOnly: true, // 可选，关闭类型检查提升构建速度，类型检查可以单独用fork-ts-checker-webpack-plugin
    }
  }],
},

4. 最后确认几个小细节 #

• 检查tsconfig的baseUrl和paths：你现在的配置是对的，baseUrl: "./src"对应paths里的相对路径没问题；
• 确认@web/features/home文件存在：去/Users/username/Documents/repo/prism/src/servers/web/vue-app/features/home目录看看，有没有对应的.ts或.vue文件，注意文件名大小写（虽然macOS默认不区分，但Webpack有时候会认大小写）。

按这几步改完，重新跑构建应该就能解决这个模块找不到的问题了！

内容的提问来源于stack exchange，提问作者Aihsan Majeed