Taro打包报错：无法识别以ext开头的协议该如何解决？

ModuleBuildError: 模块构建失败：UnhandledSchemeError: 读取"ext://industry/index"不受插件处理（未处理的协议）。Webpack 默认支持"data:"和"file:" URI，您可能需要额外插件来处理"ext:" URI。

两种可行解决方法： #

1. 自定义Webpack解析规则

直接在Taro项目的config/index.js里修改Webpack配置，用webpack-chain添加ext:协议的解析逻辑，把ext://开头的路径映射到项目实际文件路径：

const config = {
  // 其他原有配置...
  webpackChain(chain) {
    chain.resolve.plugin('ext-protocol').use(require.resolve('webpack/lib/ResolverPlugin'), [
      {
        apply(resolver) {
          resolver.hooks.resolve.tapAsync('ExtProtocolResolver', (request, resolveContext, callback) => {
            if (request.request.startsWith('ext://')) {
              // 把ext://industry/index替换成你项目里的实际路径，比如src/industry/index.js
              const realPath = request.request.replace('ext://', './src/');
              return callback(null, {
                ...request,
                request: realPath,
              });
            }
            callback();
          });
        },
      },
    ]);
  },
};

2. 用现成插件处理

如果不想自己写解析逻辑，试试webpack-unhandled-scheme-plugin插件：

• 先安装插件：

npm install webpack-unhandled-scheme-plugin --save-dev

• 然后在config/index.js的Webpack配置里引入并配置：

const UnhandledSchemePlugin = require('webpack-unhandled-scheme-plugin');

const config = {
  webpackChain(chain) {
    chain.plugin('unhandled-scheme').use(UnhandledSchemePlugin, [
      {
        schemes: ['ext'],
        handler: ({ url }) => {
          // 同样替换成项目实际路径
          return url.replace('ext://', './src/');
        },
      },
    ]);
  },
};

最后别忘了检查项目里ext://指向的资源是否存在，路径映射是否正确，避免因为路径写错导致白忙活。

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