Mpx 2.7版本迁移指南：全面升级Webpack5构建体系-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00355/article/details/148552893

Mpx 2.7版本迁移指南：全面升级Webpack5构建体系

mpx Mpx，一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架项目地址: https://gitcode.com/gh_mirrors/mp/mpx

前言

Mpx作为滴滴开源的小程序增强开发框架，在2.7版本中进行了重大架构升级。本文将详细介绍如何从旧版本迁移至2.7版本，帮助开发者理解升级带来的优势以及具体的迁移步骤。

2.7版本核心升级

Mpx 2.7版本最显著的改进是基于Webpack5重构了整个编译构建流程，这带来了以下重要提升：

性能飞跃：构建速度显著提升，实测数据显示：
- 无缓存场景下构建速度提升约180%
- 有缓存场景下构建速度提升高达10倍
持久化缓存支持：完整支持基于文件系统的持久化缓存机制
新特性增强：
- Rules复用能力
- 完善的单元测试支持
- 独立分包构建
- 分包异步化等

迁移策略选择

对于不同项目情况，Mpx提供了两种迁移方案：

推荐方案（适合大多数项目）：
- 使用@mpxjs/cli创建新项目
- 将旧项目的src目录覆盖到新项目
- 这是成本最低的迁移方式
定制化方案（适合高度定制构建的项目）：
- 按本文指引逐步升级
- 需要手动调整各项配置

详细迁移步骤

第一步：依赖升级

更新package.json中的关键依赖版本：

{
  "dependencies": {
    "@mpxjs/api-proxy": "^2.7.1",
    "@mpxjs/core": "^2.7.1",
    "@mpxjs/fetch": "^2.7.1"
  },
  "devDependencies": {
    "@mpxjs/webpack-plugin": "^2.7.1",
    "webpack": "^5.64.4",
    // 其他必要loader和插件...
  }
}

特别注意：所有自定义的loader也必须升级到Webpack5兼容版本。

第二步：启用持久化缓存

在webpack配置中添加缓存配置：

module.exports = {
  cache: {
    type: 'filesystem',
    buildDependencies: {
      build: [resolve('build/')],
      config: [resolve('config/')]
    },
    cacheDirectory: resolve('.cache/')
  },
  snapshot: {
    managedPaths: [resolve('node_modules/')]
  }
}

配置说明：

buildDependencies：声明构建配置依赖
cacheDirectory：指定缓存目录位置
managedPaths：控制哪些路径变化会触发缓存失效

第三步：调整Rules配置

2.7版本改进了.mpx文件中各区块的loader应用规则，现在会读取用户配置的module.rules。以下是关键配置示例：

module.exports = {
  module: {
    rules: [
      // JavaScript处理
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [/\.mpx\.js/, resolve('src')]
      },
      
      // TypeScript处理
      {
        test: /\.ts$/,
        use: [
          'babel-loader',
          {
            loader: 'ts-loader',
            options: {
              appendTsSuffixTo: [/\.(mpx|vue)$/]
            }
          }
        ]
      },
      
      // 样式处理（以Stylus为例）
      {
        test: /\.styl(us)?$/,
        use: [
          MpxWebpackPlugin.wxssLoader(),
          'stylus-loader'
        ]
      },
      
      // 其他必要规则...
    ]
  }
}

重点变化：

现在.mpx文件中的区块会按照用户配置的rules处理
需要显式配置各类型文件的处理规则
未声明lang属性时会使用默认lang匹配rules

第四步：Entry配置调整

对于特殊输出场景（如插件输出、独立组件/页面输出），需要使用Mpx提供的辅助方法：

module.exports = {
  entry: {
    // 插件输出
    plugin: MpxWebpackPlugin.getPluginEntry('./plugin.json'),
    
    // 独立组件输出
    list: MpxWebpackPlugin.getComponentEntry('./list.mpx'),
    
    // 独立页面输出
    index: MpxWebpackPlugin.getPageEntry('./index.mpx')
  }
}