的WebPack - 如何解决模块递归

这是我的文件夹结构的WebPack - 如何解决模块递归

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什么模块我正在尝试导入？

来源

2016-06-21 angry kiwi

如果动态构建'modulesDirectories'，是不是害怕模块名冲突？你可以很快得到错误并且很难调试。 – Everettss

当有重复时，webpack会通知您。对此的解决方案显式导入与路径相同的名称。或者将重复项重命名为更有意义的项，无论如何命名组件更为具体。 –

webpack如何区分通过npm安装的模块和“本地”（缺少更好的单词）模块之间的区别？一个同事怎么会知道？或者将来你呢？如果你正在寻找一种出路相对路径导入地狱，我可能会更愿意看看[babel-root-import]（https://www.npmjs.com/package/babel-root-import）如果你使用巴贝尔或类似的东西，如果你不是，但这只是我5美分。 – ivarni

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

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

来源

2016-07-03 11:58:22

您没有在导入语句中指定相对路径。 moduleDirectories不打算列出每个目录，只有根目录。

import语句或许应该是这样的：（假设他们是从app/访问）

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

然后只需要moduleDirectories包括“应用程序”，而不是其子文件夹。

来源

2016-06-28 18:03:25

我只想导入没有路径。你有什么建议吗？ –

请参阅本

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

，做在你的WebPack必要的配置，以解决在运行时路径

来源

2016-06-29 13:07:35

你可以看一下用巴贝尔别名

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

并配置像这样：

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

然后

import Header from 'component/Header';

来源

2016-06-29 15:20:11

这个环节应该有所帮助：

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

但从本质上讲，如果你的webpack.[production/dev].config.js文件在/project它需要一个resolve段内的一个alias部分;像这样：

module.exports = { 
    entry: path.resolve(__dirname, "./app/component/Home.js"), 
    output: { 
     path: __dirname, 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { test: /\.css$/, loader: "style!css" } 
     ] 
    }, 
    resolve: { 
     alias: { 
      moment: path.resolve(__dirname, './node_modules/moment/moment.js') 
     } 
    } 
};

来源

2016-07-02 21:47:28 Resonance

的WebPack - 如何解决模块递归

回答

相关问题