如何使webpack支持扩展别名

Question

目前我们只能为整个模块提供webpack支持别名，但我想让webpack自动将所有文件的一个扩展名映射到另一个。实施例

src
|    style.less
|    main.js

在main.js，如果我这样做

import './style.css'

使用以下配置（应该是）

resoloveExtensions: {
    css: ['css', 'less']
}

webpack将提取style.less，转换并返回

有没有办法实现这个目标？

Answer 1

resolveExtensions不会用作“替代”扩展，而是在没有提供扩展时用作扩展名。

首先，您通常希望保留默认值["", ".webpack.js", ".web.js", ".js"]。在这种情况下，您需要再添加两个：["", ".webpack.js", ".web.js", ".js", ".css", ".less"]。

在此之后，您可以style.less main.js来import './style';这样：style。然后，Webpack将尝试查找名为Company的文件以及resolveExtensions中的任何扩展名。