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所在的目录。

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

相对路径连接到上下文目录和结果根据“解析绝对路径”来解析绝对文件。

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

Webpack别名：＆＃34; ./ {path}＆＃34;之间的区别是什么？和＆＃34; {路径}＆＃34;？

1 个答案: