Question

这是我的文件夹结构

project
  |app
     |component
       |Header.js
       |Home.js
     |sass
       |header.scss
  |node_modules
     |moment

这就是我想在Home.js中导入模块的方式

import Header from 'Header'
import 'header.scss'
import moment from 'moment'

如何配置webpack以便了解我尝试导入的模块？

Answer 1

我就是这样做的。当有新目录时，必须在数组中手动添加更多目录。

resolve: {
    modulesDirectories: [
        'app',
        'app/component',
        'app/sass',
        'node_modules',
        'bower_components'
    ]
},

Answer 2

您没有在import语句中指定相对路径。 moduleDirectories不是要列出每个目录，只列出根目录。

您的import语句可能如下所示:(假设它们是从app/中访问的）

import './component/Header'
import './sass/header.scss'

然后moduleDirectories只需要包含'app'，而不是其子文件夹。

Answer 3

请参阅此

https://webpack.github.io/docs/configuration.html#resolve

并在webpack中进行必要的配置以解析运行时中的路径

Answer 4

您可以查看使用Babel别名

https://www.npmjs.com/package/babel-plugin-module-alias

并配置如下内容：

{ "src": "./app/component", "expose": "component" }

然后

import Header from 'component/Header';

Answer 5

此链接应该有所帮助：

http://xabikos.com/2015/10/03/Webpack-aliases-and-relative-paths/

但实际上，如果您的// your content is into a variable named 'content' var fs = require('fs'); try { fs.writeFileSync('myfile.txt', content, 'utf-8'); } catch(e) { alert('Failed to save the file !'); }文件位于webpack.[production/dev].config.js，则/project部分内需要alias部分;像这样的东西：

resolve

Webpack - 如何递归地解析模块

5 个答案: