问题描述
这可能是一个小问题,但我是 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.js
es 和 link/link.js
es 重命名为 button/index.js
、link/index.js
等。