Webpack extract-loader 没有正确解析别名

Question

Webpack v4.42.0

我正在尝试让 webpack 在 html img 标签中获取我的图像资源，但它似乎不尊重我的 webpack 解析别名。据我在其他帖子中看到的，我应该能够在字符串前加上 ~ 字符，但它似乎对我不起作用。

我收到以下错误：Error: Cannot find module '@assets/img/avatar_default.jpg'

有效（相对路径）：

<img src="../../../assets/img/avatar_default.jpg" />

这行不通（别名）：

<img src="~@assets/img/avatar_default.jpg" />

我已经为我的 webpack 配置了以下别名：

resolve: {
    alias: {
        '@': path.resolve(fs.realpathSync(process.cwd()),
        '@assets': path.resolve(__dirname, 'src/assets/'),
    }
}

还有我的 html-loader 配置：

{
    loader: 'html-loader',
    options: {
        minimize: false,
        preprocessor: (content, loaderContext) => {
            // Allow using EJS/underscore templating to process templates
            // This is usually used for differences between different app builds (e.g. app vs. admin)
            let result;

            try {
                result = ejs.render(content, {
                    _WHICH_APP_,
                });
            } catch (error) {
                loaderContext.emitError(error);

                return content;
            }

            return result;
        },
    }
}

Answer 1

好的，我明白了。

该问题与 extract-loader 有关，自 2020 年 5 月以来，一直在等待合并到主仓库中的一个 fork + pull 请求。参见 this GitHub issue or this pull request。

为了自己解决这个问题，我需要更新 package.json 文件中的 extract-loader 依赖项以指向这个固定的提交，然后添加一个安装后脚本来构建 extract-loader 安装固定版本后。

package.json:

"scripts": {
    "postinstall": "cd node_modules/extract-loader && yarn install && yarn build"
},
"devDependencies": {
    "extract-loader": "https://github.com/vseventer/extract-loader#7f8b82f3d6800e5ad078880594fa577f4503c64e",
},

更新您的 package.json 文件后，只需运行 yarn install 更新您的依赖项并构建固定的 extract-loader，然后重新运行您的 webpack建造。如果您想验证您是否拥有正确的 extract-loader 版本，您现在会看到错误 ModuleNotFoundError: Module not found: Error: Can't resolve 而不是 Error: Cannot find module.

对于阅读本文的任何人，您是否知道仍在维护的 extract-loader 的替代品？有点担心，即使它已被确定为有效的 PR 一年，但仍未修复。

Webpack extract-loader 没有正确解析别名

Webpack extract-loader is not resolving aliases properly

webpack

webpack-4