umi
umi copied to clipboard
[Bug] 目前不支持的第三方 webpack 导入方式问题
问题
目前 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 导入,成本较高。
多安装一个 webpack 会不会有多实列的问题 我记得 webpack 有多实列出错的问题 深层的webpack 引入感觉遇到一类就加一类吧 -.- 上一次就加了好几个
多安装一个 webpack 会不会有多实列的问题 我记得 webpack 有多实列出错的问题 深层的webpack 引入感觉遇到一类就加一类吧 -.- 上一次就加了好几个
在这个用例里面是没问题的,主要是 webpack 没公开这个类,稍微是有些 “非常规” 的用法的,如果是公开方法,加上没问题的。
I tried all the methods above,but the problem still exists。Switch webpack version to 4.44.x,No template for dependency: ConstDependency
umi 4 不支持 webpack 4 。
此问题已有多个解决方法,遇到问题选其一尝试即可,故关闭 issue 。