NodeJS Webpack 5别名解析通配符

我想知道在Webpack 5中设置别名时是否可以使用某种通配符。
我当前的别名如下所示：

// ...
resolve: {
  alias: {
    'scope:a$': path.resolve(__dirname, 'node_modules/@scope/package/a'),
    'scope:b$': path.resolve(__dirname, 'node_modules/@scope/package/b'),
    'scope:c$': path.resolve(__dirname, 'node_modules/@scope/package/c'),
  },
},
// ...

字符串
这个很好用。它目前正在阻止我的项目中的相对路径地狱。我可以汇入：

@use 'scope:a' as a;

型
而不是：

@use '../../../../../a' as a;

型
但我很想用一个化名来解决这个问题。大概是这样的：

// ...
resolve: {
  alias: {
    'scope:': path.resolve(__dirname, 'node_modules/@scope/package/*'),
  },
},
// ...

型
此范例实作会掷回错误：
错误在...
模块生成失败...
...
Webpack的文档似乎没有提到resolve.alias的任何可能的通配符。有人知道在Webpack 5别名中是否可以使用通配符吗？
先谢了。

正如@KarloSpacapan提到的，我们可以指定resolve.alias的目录路径
例如：
项目结构：

$ tree -L 2 -I node_modules
.
├── dist
│   ├── bundle.js
│   └── main.css
├── package-lock.json
├── package.json
├── src
│   ├── index.js
│   └── style.scss
└── webpack.config.js

2 directories, 7 files

字符串
让我们创建一个名为@scope/package的假包，其中包含node_modules中的a.scss、b.scss和c.scss文件。
node_modules/@scope/package/a.scss：

.a {
    color: red;
}

型
node_modules/@scope/package/b.scss：

.b {
    color: aqua;
}

型
node_modules/@scope/package/c.scss：

.c {
    color: beige;
}

型
src/style.scss：

// @use 'scope:a' as a;
// @use 'scope:b' as b;
// @use 'scope:c' as c;

@use 'scope/a' as a;
@use 'scope/b' as b;
@use 'scope/c' as c;

型
src/index.js：

import './style.scss';

型
webpack.config.js：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        clean: true,
    },
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
            },
        ],
    },
    resolve: {
        // alias: {
        //  'scope:a$': path.resolve(__dirname, 'node_modules@scope/package/a'),
        //  'scope:b$': path.resolve(__dirname, 'node_modules@scope/package/b'),
        //  'scope:c$': path.resolve(__dirname, 'node_modules@scope/package/c'),
        // },

        alias: {
            scope: path.resolve(__dirname, 'node_modules/@scope/package'),
        },
    },
    plugins: [new MiniCssExtractPlugin()],
};

型
构建日志：

> webpack

asset main.css 43 bytes [compared for emit] (name: main)
asset bundle.js 0 bytes [compared for emit] [minimized] (name: main)
Entrypoint main 43 bytes = main.css 43 bytes bundle.js 0 bytes
orphan modules 2.82 KiB (javascript) 937 bytes (runtime) [orphan] 8 modules
cacheable modules 23 bytes (javascript) 42 bytes (css/mini-extract)
  ./src/index.js 23 bytes [built] [code generated]
  css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/style.scss 42 bytes [built] [code generated]

LOG from webpack.FileSystemInfo
<w> Managed item /home/lindu/workspace/webpack-samples/webpack-v5/stackoverflow/75229443/node_modules/@scope/package isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
+ 12 hidden lines

webpack 5.88.2 compiled successfully in 421 ms

型
产出
dist/main.css：

.a{color:red}.b{color:aqua}.c{color:beige}

型

NodeJS Webpack 5别名解析通配符

1条答案

相关问题

热门标签

最新问答