Webpack 别名："./{path}" 和 "{path}" 有什么区别？

Question

我在app/components/中定义了一些 React 组件。我在 webpack 中设置了一些别名，如下所示：

//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输出中）？

Answer 1

>__dirname指向webpack.config.js所在的当前目录。因此，当您使用 path: __dirname 指定输出文件的位置时，输出文件的位置将相对于webpack.config.js所在的主目录。

关于在解析中使用./：路径相对于包含require调用的文件进行解析。因此，您应该在 webpack.config 中使用绝对路径.js以避免在调用别名文件/模块时需要考虑相对路径。请参阅此处的 webpack 文档。

相对路径将联接到上下文目录，并生成 绝对文件根据"解析绝对路径"进行解析。

因此，在使用别名时无需使用 ./。您可以在此处查看哪些别名将解析为哪些别名的示例我希望我能够解释它。