Webpack 网页包提取加载程序未正确解析别名

网页包v4.42.0

我试图让webpack在html img标记中提取我的图像资产，但它似乎不尊重我的webpack解析别名。据我在其他帖子上看到的，我应该能够在字符串前面加上

~

字符，但它似乎不适合我

我得到以下错误：

错误：找不到模块'@assets/img/avatar\u default.jpg'

这项工作（相对路径）：

和我的html加载程序配置：

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

---

好吧，我想起来了

该问题与提取加载器有关，自2020年5月以来，有一个fork+pull请求一直在等待合并到主回购中。看到或看到

为了自己解决这个问题，我需要更新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文件后，只需运行

warn install

更新依赖项并构建固定的

提取加载程序

，然后重新运行Web包构建。如果要验证是否具有正确版本的

提取加载程序

，您现在将看到错误，即

ModuleNotFoundError:modulenotfound:error:Cannot resolve

，而不是

错误：找不到模块

对于阅读本文的人来说，您知道还有一种替代的解压加载器仍在维护吗？令人担忧的是，这一问题还没有得到解决，即使它已经被认定为一个有效的公关一年了

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

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

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