带有 babel-loader 的 Webpack：使用构建项目之外的入口点答案

【问题标题】：Webpack with babel-loader: Using an entry point that is outside of the build project带有 babel-loader 的 Webpack：使用构建项目之外的入口点
【发布时间】：2016-04-23 18:18:01
【问题描述】：

我正在尝试将 webpack+babel-loader 与一种模式一起使用，该模式使我的构建器项目与我的应用程序源项目分开。

基本上：

/builder-project/build.js
/app-project/app.js

在build.js:

var webpack = require('webpack');

var compiler = webpack({
    entry : './../app/app.js',
    output : {
        filename : 'out.js'
    },
    bail : true,
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }
        ]
    }
});

compiler.run(function(err, stats) {
    console.log(err);
});

而app.js 包含一个基本的 ES6 模块。

在运行build.js 时，我无法摆脱Couldn't find preset "es2015" relative to directory [absolute-path-on-my-machine]/app-project。所以基本上它是在寻找支持 babel-loader 相对于我的入口点路径的 npm 模块，而不是构建脚本。

我已经在 webpack 配置中尝试了 context 和 resolve 解析，但 webpack/babel-loader 似乎无法加载相对于我的入口点的内容。对我来说，保持库路径相对于构建脚本而不是入口点会更有意义，但也许事情不是这样设计的？

更新

所以@nils 下面的答案肯定解决了眼前的问题。然而，同样的问题在第二个包含的模块中再次发生。我没有在上面包含它的来源，但请看一下：

app.js:

import Factory from './../../vendor/factory-project/factory.js';

var App = Factory.define({
  //...
});

export default App;

factory-project 文件夹用npm 初始化，并有一个node_modules。当我运行构建时，虽然加载器现在在app.js 上运行良好，但在处理其中的import 时会抛出与以前相同的错误：Couldn't find preset "es2015" relative to directory [some-path-on-my-machine]/factory-project。看起来即使使用resolveLoader（如答案中所示），在包含使用npm 初始化的项目文件夹中的文件时，它似乎也被忽略了。

更新 2

有一个已知的错误导致此问题。请参阅下面的解决方法。

【问题讨论】：

标签： webpack ecmascript-6 babeljs

【解决方案1】：

您与resolve 选项非常接近，有一个名为resolveLoader。

From the documentation:

重要提示：这里的加载器是相对于它们所应用的资源进行解析的。这意味着它们不会相对于配置文件进行解析。如果你从 npm 安装了加载器，并且你的 node_modules 文件夹不在所有源文件的父文件夹中，那么 webpack 找不到加载器。您需要将 node_modules 文件夹作为绝对路径添加到 resolveLoader.root 选项。 (resolveLoader: { root: path.join(__dirname, "node_modules") })

假设您的 node_modules 文件夹与 build.js 位于同一文件夹中，您可以编写以下内容：

var compiler = webpack({
    entry : './../app/app.js',
    output : {
        filename : 'out.js'
    },
    bail : true,
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }
        ]
    },
    resolveLoader: {
        root: path.resolve(__dirname, 'node_modules')
    }
});

【讨论】：

哈，好的，所以你的解决方案确实有帮助，谢谢。然而，它比这更复杂。在我的app.js 中，我有一个import，它在另一个项目import otherModule from './../../other-project/module.js' 中拉出另一个模块。因为other-project 内部有一个node_modules，所以我现在在该目录上遇到了相同的Couldn't find preset "es2015" relative to directory 错误。似乎resolveLoader 被覆盖了。任何进一步的想法都非常感谢！
请明确一点：当您不包含其他项目中的其他模块时，它是否有效？无论哪种方式，假设您只运行一个 webpack 实例，包括来自另一个项目的文件应该不是问题。您确定path.resolve(__dirname, 'node_modules') 指向正确的目录吗？试试console.loging。
当我在app.js 中不包含其他模块时它确实有效，因此resolveLoader 路径是正确的（从技术上讲，我的原始问题得到了回答）。但奇怪的是，从使用 npm 初始化的外部目录导入模块似乎又会破坏事情。
用最新事件更新了我上面的问题
如果您重命名node_modules 文件夹或package.json 文件，或两者都重命名，问题是否仍然存在？

【解决方案2】：

所以看起来这是一个已知的错误： https://github.com/babel/babel-loader/issues/166

我将接受@nils 的回答，因为这是应该工作的，但在解决错误之前，必须使用在预设中放置require.resolve 的解决方法：

var compiler = webpack({
    entry : './../app/app.js',
    output : {
        filename : 'out.js'
    },
    bail : true,
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: [require.resolve('babel-preset-es2015')]
                }
            }
        ]
    },
    resolveLoader: {
        root: path.resolve(__dirname, 'node_modules')   //no work :(
    }
});

【讨论】：