[Bug] 目前不支持的第三方 webpack 导入方式问题

[fz6m]

问题

目前 umi 4 不支持以下两种与 webpack 有关的导入。

使用的 webpack 插件中导入了 webpack

如果 webpack 插件使用了 webpack 实例，比如 require('webpack') 导入，此时是找不到的，因为解析配置文件的时机还没有 hook webpack 导入，在 pnpm 的严格隔离机制下，无法找到 webpack 。

反馈来自于：#10289 （插件 workbox-webpack-plugin 中导入了 webpack 但找不到报错）

解决方法

可以手动延缓该插件的导入时机，比如不在配置文件顶层导入而是放到 chainWebpack 中：

// .umirc.ts
-  import { GenerateSW } from "workbox-webpack-plugin";

// ...

  chainWebpack() {
+   const { GenerateSW } = require("workbox-webpack-plugin");    
  }

或者手动安装一个 webpack ，让他能找到 webpack 实例：

  pnpm add -D webpack

理想的预期情况是该插件支持传入 webpack 实例的实现，但涉及到插件内改造推进困难。

深层的 webpack 路径导入

反馈来自于：#10565 、#10712

比如 babel 插件中使用了 webpack 的非公开方法，比如 babel-plugin-react-css-modules 插件使用了：

// https://github.com/birdofpreyru/babel-plugin-react-css-modules/blob/master/src/getLocalIdent.js

import TemplatedPathPlugin from 'webpack/lib/TemplatedPathPlugin';
import createHash from 'webpack/lib/util/createHash';

这两个深层路径方法都不是 webpack 公开方法（指无法通过 webpack.xxx 使用），在 umi 4 中也无法通过 deepimport.json 的方式 hook 他的导入，因为预打包的产物是 index.js ，没有路径，我们也没有办法从公开方法上取到他。

解决方法

目前一种很 hack 的解决方法是用户自己 hook 需要的 webpack 深层路径导入：

  pnpm add -D webpack

// .umirc.ts

function webpackDeepPathImportWorkaround() {
  const webpackPath = path.join(__dirname, './node_modules/webpack/lib')
  const mod = require('module')
  const resolveFilename = mod._resolveFilename
  const hookPropertyMap = new Map()
  hookPropertyMap.set(
    'webpack/lib/TemplatedPathPlugin',
    path.join(webpackPath, './TemplatedPathPlugin.js')
  )
  hookPropertyMap.set(
    'webpack/lib/util/createHash',
    path.join(webpackPath, './util/createHash.js')
  )
  mod._resolveFilename = function (
    request: string,
    parent: any,
    isMain: boolean,
    options: any
  ) {
    const hookResolved = hookPropertyMap.get(request)
    if (hookResolved) request = hookResolved
    return resolveFilename.call(mod, request, parent, isMain, options)
  }
}
webpackDeepPathImportWorkaround()

这种方式需要提前获知使用的插件有哪些深层的 webpack 导入，成本较高。

[xierenyuan]

多安装一个 webpack 会不会有多实列的问题 我记得 webpack 有多实列出错的问题 深层的webpack 引入感觉遇到一类就加一类吧 -.- 上一次就加了好几个

[fz6m]

多安装一个 webpack 会不会有多实列的问题 我记得 webpack 有多实列出错的问题 深层的webpack 引入感觉遇到一类就加一类吧 -.- 上一次就加了好几个

在这个用例里面是没问题的，主要是 webpack 没公开这个类，稍微是有些 “非常规” 的用法的，如果是公开方法，加上没问题的。

[yq756530939]

I tried all the methods above，but the problem still exists。Switch webpack version to 4.44.x，No template for dependency: ConstDependency

[fz6m]

umi 4 不支持 webpack 4 。

[fz6m]

此问题已有多个解决方法，遇到问题选其一尝试即可，故关闭 issue 。