Webpack別名：「./{path}」和「{path}」有什麼區別？

我在app/components/中定義了一些React組件。我設置一些別名的WebPack這樣的：Webpack別名：「./{path}」和「{path}」有什麼區別？

//webpack.conf.js 
module.exports = { 
    entry: './app/app.jsx', 
    output: { 
     path: __dirname, 
     filename: './public/bundle.js' 
    }, 
    resolve: { 
     root: __dirname, 
     alias: { 
      Main: 'app/components/Main.jsx', 
      Nav: 'app/components/Nav.jsx', 
      Weather: 'app/components/Weather.jsx', 
      About: 'app/components/About.jsx' 
     }, 
     extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
     loaders: [ 
      { 
       loader: 'babel-loader', 
       query: { 
        presets: ['react', 'es2015', 'stage-0'] 
       }, 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/ 
      } 
     ] 
    } 
};

我的問題是：爲什麼所有的別名開始'app'而不是'./app'？當我將別名更改爲以'./'開頭（因爲我認爲它們是相同的），webpack抱怨Module not found: Error: Cannot resolve...，所以它看起來並不相同。

爲什麼要求entry和output.filename，他們確實需要'./'？是因爲resolve.root: __dirname？ __dirname（均在resolve and in輸出）的目的是什麼？

來源

2016-07-15 Julien Chien

__dirname點到當前目錄下，你webpack.config.js駐留在。因此，當你與path: __dirname指定輸出文件的位置，輸出文件的位置將是相對於主目錄中，你webpack.config.js所在。

關於在解析中使用./：路徑解析爲相對於包含require調用的文件。因此，您應該在webpack.config.js中使用絕對路徑，以避免在調用別名文件/模塊時需要考慮相對路徑。請參閱webpack文檔here。

將相對路徑連接到上下文目錄，並根據「解析絕對路徑」解析得到的絕對文件。

因此，您在使用別名時不需要使用./。你可以看到哪些別名的例子將被解析爲什麼here 我希望我能夠解釋它。

來源

2016-07-15 06:24:39

這[link]（http://webpack.github.io/docs/configuration.html#resolve-alias）很棒。謝謝 –

高興地幫助！ :)。如果您發現它有用，請接受答案。 –

Webpack別名：「./{path}」和「{path}」有什麼區別？

回答

相關問題