Qwik结合Webpack构建前端项目及模块找不到错误解决方案咨询

问题分析 #

你遇到的具体错误：

Module not found: Error: Can't resolve '@qwik-city-plan' in '/Users/liyunhua/study/qwik/qwik-webpack/node_modules/@builder.io/qwik-city'

这个错误核心是Qwik City依赖的@qwik-city-plan包缺失、路径配置异常，或版本不匹配导致的模块解析失败。

解决方案 #

1. 重新安装依赖 #

清理现有依赖并重新拉取，确保所有包完整安装：

# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json yarn.lock pnpm-lock.yaml
# 重新安装
npm install # 或 yarn install / pnpm install

2. 统一Qwik版本 #

检查package.json中@builder.io/qwik和@builder.io/qwik-city的版本必须完全一致，版本不兼容会导致依赖缺失。示例配置：

{
  "dependencies": {
    "@builder.io/qwik": "^1.2.10",
    "@builder.io/qwik-city": "^1.2.10"
  }
}

版本不一致时，修改后重新执行依赖安装命令。

3. 配置Webpack模块解析 #

在Webpack配置文件中添加别名规则，指定@qwik-city-plan的实际路径：

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      '@qwik-city-plan': '@builder.io/qwik-city/dist/qwik-city-plan',
    },
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
  },
};

4. 引入Qwik官方Webpack插件 #

Qwik提供专属Webpack插件处理编译逻辑，确保配置中已引入：

// webpack.config.js
const { QwikWebpackPlugin } = require('@builder.io/qwik/webpack');

module.exports = {
  plugins: [
    new QwikWebpackPlugin(),
  ],
};

该插件会自动处理Qwik的模块解析、代码分割等需求，避免手动配置遗漏。

5. 清理Webpack缓存 #

缓存残留可能导致旧配置生效，清理后重新构建：

rm -rf node_modules/.cache
npx webpack --clean

Qwik与Webpack配合的基础搭建流程 #

如果是从头搭建项目，可按以下步骤操作：

• 初始化项目：npm init -y
• 安装核心依赖：npm install @builder.io/qwik @builder.io/qwik-city
• 安装Webpack相关工具：npm install webpack webpack-cli webpack-dev-server @builder.io/qwik/webpack typescript ts-loader --save-dev
• 创建Webpack配置文件，引入QwikWebpackPlugin并配置模块解析规则
• 编写Qwik组件和入口文件，执行npx webpack serve启动开发服务

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