如何在React Static Boilerplate中創建一個webpack導入別名？

我有以下import：如何在React Static Boilerplate中創建一個webpack導入別名？

// cwd: /project/pages/blog/category/red/index.js 

import PageHeader from '../../../components/PageHeader';

而且我希望能夠以這種方式寫（在我的項目的任何地方）：

// cwd: /project/pages/blog/category/red/index.js 

import PageHeader from 'components/PageHeader';

我試着使用的WebPack resolveoption但我似乎無法使其工作：

config.resolve = { 
    alias: { 
    components: [ 
     path.resolve('../components/') 
    ] 
    } 
};

和

config.resolve = { 
    root: [ 
    path.resolve('../') 
    ] 
};

我這麼想嗎？

我的應用程序架構從React Static Boilerplate分叉，所以我webpack.config.js看起來像this one

來源

2016-05-03 Pierre

試過設置'root'按[這個答案]（http://stackoverflow.com/a/27512914/957731）？ – ivarni

'root'適用於我的webpack設置 – CodingIntrigue

@ivarni是的，我做了，（並更新了我的答案），仍然沒有解決 – Pierre

這個問題似乎與React Static Boilerplate有關，更具體地說，當構建靜態頁面時。

我發現一個解決方法，現在完成這項工作。我必須在前面加上一個~到別名所以它不會「處理」作爲node_module ..

config.resolve = { 
    alias: { 
    "~components": path.resolve(__dirname, '../components'), 
    "~decorators": path.resolve(__dirname, '../core/scripts/decorators'), 
    "~helpers": path.resolve(__dirname, '../core/scripts/helpers'), 
    "~i18n": path.resolve(__dirname, '../core/i18n'), 
    } 
};

用法：

import fetch from '~helpers/fetch'; 
import header from '~components/header';

更多關於這on this Github issue信息。

來源

2016-05-12 18:58:49 Pierre

config.resolve = { 
    alias: { 
    components: path.resolve('../components/') 
    } 
};

alias接受鍵值對，string型的價值存在。我不確定它是否適用於數組。

來源

2016-05-03 14:59:09 raiyan

要回答更specificly它會好知道在哪裏PageHeader和你webpack配置爲：

假設：

PageHeader是/project/pages/components
和你webpack配置是在根級別/project

，那麼你的決心將是這個樣子：

config.resolve = { 
    alias: { 
    components: path.resolve('./pages/components') 
    } 
};

再次它所依賴的道路上你的webpack配置和你components目錄。 path.resolve將相應地改變。

來源

2016-05-03 17:05:45

如何在React Static Boilerplate中創建一個webpack導入別名？

回答

相關問題