1

这可能是一个微不足道的问题，但我是 webpack 的新手。我有一个项目，其中包含路径似乎搞砸了。项目结构如下（简化）：

app/
├─ webpack.config.js
├─ dist/
├─ src/
│  ├─ main.js
│  ├─ modules/
│  │  ├─ button/
│  │  │  ├─ button.js
│  │  ├─ link/
│  │  │  ├─ link.js
      ... many more

请注意，每个模块都有自己的子文件夹。main.js看起来像这样：

import './modules/button';
import './modules/link';
...

模块可以导入其他模块：

// app/src/modules/button/button.js
import { mediaLink } from '../link';

我有一个webpack.config.js看起来像这样的基本设置：

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js',
  },
};

出于某种原因，所有导入都不考虑模块的子文件夹。当我运行时webpack，我得到了很多Module not found: Error: Can't resolve ...错误。错误输出如下所示：

ERROR in ./src/main.js
Module not found: Error: Can't resolve './modules/button' in '/path/to/project/app/src'
 @ ./src/main.js 8:0-27

我可以将 webpack 配置为在导入模块时使用某种映射吗？

4

1 回答 1

1

如果树是

├─ src/
│  ├─ main.js
│  ├─ modules/
│  │  ├─ button/
│  │  │  ├─ button.js

那么src/main.js将需要

import './modules/button/button';

或者，如果button.js 被命名为index.js( resolve.mainFiles)，

import './modules/button';

会工作。

是的，您可以设置别名/映射，但这可能不值得（特别是当您考虑您的 IDE/编辑器/... 也需要了解映射时）。

只需先尝试将这些button/button.jses 和link/link.jses 重命名为button/index.js等link/index.js。

于 2021-04-22T11:58:37.043 回答