的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 - 如何解決模塊遞歸

回答

相關問題