Webpack 提取加载器未正确解析别名

问题描述

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;
        },}
}

解决方法

好的，所以我想通了。

该问题与 extract-loader 相关，并且自 2020 年 5 月以来一直在等待合并到主存储库中的分叉 + 拉取请求。请参阅 this GitHub issue 或 this pull request。>

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

对于阅读本文的任何人，您是否知道仍然维护的提取加载器的替代方案？有点令人担忧的是，即使它已经被确定为工作 PR 一年了，它也没有得到修复。