support webpack5

[bigbossx]

Are there any plans to support webpack5?

it seems uni is compiled via @vue/services which the new version already supports webpack 5.but simply updating the @vue/services version doesn't seem to work as there are still some uni custom plugins, is there any other way ?

[zhetengbiji]

#3617

[zhetengbiji]

#2945

[zhetengbiji]

#2793

[ModyQyW]

#3001

[zhetengbiji]

#3342

[zhetengbiji]

#2804

[zhetengbiji]

使用 vue-cli 创建 alpha 分支已支持，使用中发现问题请反馈。

npm install -g @vue/cli@5
vue create -p dcloudio/uni-preset-vue#alpha test

已知问题：

• 遗留部分警告未处理。
• Win 平台 dev 模式编译结束（小程序、App）会结束进程。

[bigbossx]

使用 vue-cli 创建 alpha 分支已支持，使用中发现问题请反馈。

npm install -g @vue/cli@5
vue create -p dcloudio/uni-preset-vue#alpha test

已知问题：

• 遗留部分警告未处理。
• Win 平台 dev 模式编译结束（小程序、App）会结束进程。

Awesome work! 近期我将基于此进行升级工作。

btw，为什么在webpack4的模式下微信小程序模式打包基本没有cache的构建缓存，在项目体量上来之后，目前一次完整的watch mode 启动（1600多个模块），需要至少30-40s的时间。我看到了类似如下的逻辑

我是否错过了什么说明文档，是否可以配置什么去开启cache优化呢

[zhetengbiji]

使用 vue-cli 创建 alpha 分支已支持，使用中发现问题请反馈。

npm install -g @vue/cli@5
vue create -p dcloudio/uni-preset-vue#alpha test

已知问题：

• 遗留部分警告未处理。
• Win 平台 dev 模式编译结束（小程序、App）会结束进程。

Awesome work! 近期我将基于此进行升级工作。

btw，为什么在webpack4的模式下微信小程序模式打包基本没有cache的构建缓存，在项目体量上来之后，目前一次完整的watch mode 启动（1600多个模块），需要至少30-40s的时间。我看到了类似如下的逻辑

我是否错过了什么说明文档，是否可以配置什么去开启cache优化呢

部分情况下（如使用条件编译或编译到多个平台）缓存会错乱，所以禁用了 cache。另外在 webpack5 内置了 cache 功能，但是框架近期更新并未处理和验证相关逻辑，使用时需要注意一下，后续我会单独验证和处理一下这部分。

[ModyQyW]

文档是否可以更新一下呢？

[bigbossx]

文档是否可以更新一下呢？

我认为目前还没有到能正式使用的阶段，@vue/cli的相关uni插件也要同步更新，但是它仅处于alpha阶段，需要大量的验证和测试，
我初步进行了使用，可惜迁移并不太顺利。

[bigbossx]

btw，development开启了UNI_USING_CACHE以后，再次启动编译从26s，减少到了7s，还在进一步观察是否有缓存所带来的相关问题。但它确实会提供值得一试的优化效果

[ModyQyW]

我也认为没到能正式使用的阶段，但希望通过写进文档吸引更多的人参与测试。

[zhetengbiji]

依赖更新到 2.0.1-alpha-35420220816001

• 默认关闭了 babel-loader 的 cache（调整为和 webpack4 一致）。
• 修复了导致小程序端组件编译失败的一些问题。

[zhetengbiji]

我也认为没到能正式使用的阶段，但希望通过写进文档吸引更多的人参与测试。

好的，文档将增加一行相关说明

[zhaotoday]

大概什么时候可以正式使用？

[lvzhenbo]

希望能够尽快完成支持webpack5，webpack4和新tls版本node18不兼容

[zhetengbiji]

大概什么时候可以正式使用？

再观察一段时间无开发者报告相关问题

[lvzhenbo]

postcss出现一些弃用警告

trim: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration​
​remove-scoped: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration​
​add-id: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration​

[zhetengbiji]

postcss出现一些弃用警告

trim: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration​
​remove-scoped: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration​
​add-id: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration​

执行 npx @dcloudio/uvm alpha 更新一下依赖

[zhetengbiji]

希望能够尽快完成支持webpack5，webpack4和新tls版本node18不兼容

目前已处理完已知的兼容问题

[zhaotoday]

@zhetengbiji 还有多久可以正式使用？

[zhetengbiji]

@zhetengbiji 还有多久可以正式使用？

从目前的反馈看，已经可以正式使用，将会随着下个正式版的发布调整相关文档。

[zhaotoday]

@zhetengbiji 还有多久可以正式使用？

从目前的反馈看，已经可以正式使用，将会随着下个正式版的发布调整相关文档。

大概几号可以正式使用。

[zhetengbiji]

@zhetengbiji 还有多久可以正式使用？

从目前的反馈看，已经可以正式使用，将会随着下个正式版的发布调整相关文档。

大概几号可以正式使用。

从目前的反馈看，上个月已经可以正式使用。但下个正式版的发布才会调整相关文档。

[zhijiang3]

当使用 Webpack5 时，如果在 src/pages.json 配置了 subPackages 字段分包，然后在 src/manifest.json 文件开启 optimization.subPackages 分包优化时，编译就会陷入死循环。

// src/manifest.json
{
  "mp-weixin": {
    "optimization": {
      // 开启分包优化
      "subPackages": true
    }
  }
}

经过调试发现 cacheGroups 的 test 传入函数时，第二个参数 chunks 不再是数组，

uni-app/packages/vue-cli-plugin-uni/lib/split-chunks.js

Lines 125 to 157 in fbc8c10

	const cacheGroups = {
	default: false,
	vendors: false,
	commons: {
	test (module, chunks) {
	if (!baseTest(module)) {
	return false
	}
	const matchSubPackages = findSubPackages(chunks)
	const matchSubPackagesCount = matchSubPackages.size
	const isMainPackage = ( // 非分包 或 两个及以上分包 或 主包内有使用
	matchSubPackagesCount === 0 ||
	matchSubPackagesCount > 1 ||
	(
	matchSubPackagesCount === 1 &&
	hasMainPackage(chunks)
	) ||
	(
	matchSubPackagesCount === 1 &&
	hasMainPackageComponent(module, matchSubPackages.values().next().value)
	)
	)
	if (isMainPackage && process.env.UNI_OPT_TRACE) {
	console.log('main', module.resource, chunks.map(chunk => chunk.name))
	}
	return isMainPackage
	},
	minSize: 0,
	minChunks: 1,
	name: 'common/vendor',
	chunks: 'all'
	}
	}

而 optimization.subPackages 分包优化的逻辑是用到了第二个参数 chunks 的，导致在 Webpack 编译过程中执行报错，错误没有被捕获也没有抛出来，所以编译一直在运行。

test 参数结构如下图：

Webpack5 的文档在这里：https://webpack.docschina.org/plugins/split-chunks-plugin/#splitchunkscachegroupstest

目前我的处理方案是这样的，通过拦截 test 函数进行参数包装：

// vue.config.js
const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  configureWebpack: config => {
    const { cacheGroups } = config.optimization.splitChunks;

    if (cacheGroups) {
      Object.keys(cacheGroups).forEach(chunkName => {
        const { test } = cacheGroups[chunkName];

        if (typeof test === 'function') {
          cacheGroups[chunkName].test = (module, { chunkGraph }) => {
            return test(module, chunkGraph.getModuleChunks(module));
          };
        }
      });
    }
  },
});

如果有空的话，还是希望官方能处理下这个问题，我看到在社区也有类似的文章，答案都是关闭 optimization.subPackages 选项。

[jiekechens]

[jiekechens]

哥 我这个都把vue/cli 降到 4.5.15了 他还是不行

[lvzhenbo]

哥 我这个都把vue/cli 降到 4.5.15了 他还是不行

已经更新到正式版了，直接用cli5就行

[hedonghui]

webpack5的支持已经更新到正式版本了吗？我看官网上还没更新文档，求问