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

【问题标题】：Webpack extract-loader is not resolving aliases properlyWebpack extract-loader 没有正确解析别名
【发布时间】：2021-05-19 20:27:27
【问题描述】：

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

【问题讨论】：

标签： webpack webpack-4

【解决方案1】：

好的，我想通了。

该问题与 extract-loader 有关，自 2020 年 5 月以来，有一个 fork + pull 请求一直在等待合并到主存储库中。请参阅 this GitHub issue 或 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 一年了，也没有得到解决。

【讨论】：