让 WebStorm 在 JSX 中使用 HTML 标签的别名答案

【问题标题】：Make WebStorm use alias for HTML tags in JSX让 WebStorm 在 JSX 中使用 HTML 标签的别名
【发布时间】：2019-10-14 12:36:18
【问题描述】：

我需要 WebStorm (WS) 的解决方案；设置 webpack 别名适用于像 src 这样的 html 属性；这是我的 webpack.config.js 例如：

const path = require('path');

module.exports = {
    resolve: {
        extensions: ['scss', 'html', 'jsx'],
        root: path.resolve(__dirname),
        alias: {
            components: path.resolve(__dirname, 'components'),
            layout: path.resolve(__dirname, 'layout'),
            static: path.resolve(__dirname, 'static'),
            js: path.resolve(__dirname, 'static/js'),
            media: path.resolve(__dirname, 'static/media'),
            sass: path.resolve(__dirname, 'static/sass'),
            vendors: path.resolve(__dirname, 'static/vendors'),
        },
    },
};

例如查看别名设置，我想像这样使用它

<img src="media/logo/medium.png">

不喜欢

<img src="static/media/logo/medium.png">

自动完成功能不起作用，它不使用 webpack 配置 html 属性，如 src，仅适用于 import。

附：我已经知道 make 文件夹是“资源根目录”，但它只从资源目录自动完成。

【问题讨论】：

标签： reactjs webpack webstorm

【解决方案1】：

Webpack 解析规则目前仅适用于导入，不支持 HTML/CSS 中的路径别名。请关注WEB-38331 获取更新

【讨论】：