Webpack:配置路径映射

Question

这可能是一个微不足道的问题，但我是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导入模块时，我可以配置它使用某种映射吗？

Answer 1

如果树是

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

则CCD_ 5将需要

import './modules/button/button';

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

import './modules/button';

会起作用。

是的，可以设置别名/映射，但这可能不值得(尤其是当您考虑到您的IDE/editor/…还需要了解映射时(。

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