Webpack：配置路径映射

如何解决Webpack：配置路径映射

这可能是一个小问题，但我是 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 配置为在导入模块时使用某种映射吗？

解决方法

如果树是

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

那么 src/main.js 将需要

import './modules/button/button';

或者，如果 button.js was named index.js (resolve.mainFiles)，

import './modules/button';

会起作用。

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

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