相对路径导致的 webpack/babel-loader ReferenceError答案

【问题标题】：webpack/babel-loader ReferenceError caused by relative pathing相对路径导致的 webpack/babel-loader ReferenceError
【发布时间】：2017-01-29 10:28:52
【问题描述】：

我一直在尝试设置这个 React + Relay 示例 (https://github.com/RGRjs/rgrjs.com)，但在解析 babel-loader 的 webpack 插件的路径时遇到了麻烦。当我在我的项目目录中运行 webpack 时，我遇到了 ReferenceError 问题，我认为这是由 webpack 通过它尝试构建的单个文件的上下文解析插件依赖关系引起的。

详情：我的项目结构为链接回购：

rgrjs:
├── data
|   ├── schema.js
|   └── header.html
├── js
|   ├── app.js
|   └── components
|    |   └── Main.js
├── public
|   └── bundle.js
babelRelayPlugin.js
webpack.config.js

webpack.config.js 设置如下：

var projectRoot = process.env.PWD;
console.log('Project Rooted at ' + projectRoot);
module.exports = {
    context: projectRoot,
    entry: "./js/app.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    resolveLoader: {
        root: projectRoot
    },

    module:{
        loaders: [
            {
                test:/\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                babelrc: false,
                query: {
                    presets: ['react','es2015','stage-0'],
                    plugins: ['./babelRelayPlugin']
                }
            }
        ]
    }
};

当我尝试构建时，我收到以下错误：

./js/app.js 中的错误模块构建失败：ReferenceError：在“base”中指定的未知插件“./babelRelayPlugin”为 0，尝试相对于“.../rgrjs/js”进行解析

引用的“babelRelayPlugin”位于根“rgrjs”目录（相对于 webpack 应该是“./”。当我将插件路径定义切换为“../babelRelayPlugin”时，./js/app. js 解决了参考，但我遇到了一个不同的问题：

./js/components/Main.js 中的错误模块构建失败：ReferenceError：在“base”中指定的未知插件“../babelRelayPlugin”为 0，尝试相对于“.../rgrjs/js/components”进行解析

其他解决方案似乎建议使用resolve/resolveLoader/context，但从配置文件中可以看出它似乎对我不起作用。是我设置错了还是这是一个真正的错误？

最好的

【问题讨论】：

标签： webpack babeljs relay

【解决方案1】：

这里的问题似乎是 webpack 将插件路径作为字符串传递，该字符串在不同文件的每个转译中重新评估，而路径本身需要定义为严格路径，如下所示：

var projectRoot = process.env.PWD;
console.log('Project Rooted at ' + projectRoot);

var path = require('path');

module.exports = {
    //...
    module:{
        loaders: [
            {
                //...
                loader: 'babel-loader',
                query: {
                    presets: ['react','es2015','stage-0'],
                    plugins: [path.resolve(projectRoot,'babelRelayPlugin')]
                }
            }
        ]
    }
};

这似乎不适用于不同的版本/构建，因为相同的配置文件和文件夹结构在不同的计算机上构建良好。

【讨论】：