Question

我尝试使用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

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

Answer 1

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

From the documentation:

重要信息：此处的加载器相对于它们应用的资源进行了解析。这意味着它们无法相对于配置文件进行解析。如果您从npm安装了加载器并且您的node_modules文件夹不在所有源文件的父文件夹中，则webpack无法找到加载器。您需要将node_modules文件夹添加为resolveLoader.root选项的绝对路径。（resolveLoader：{root：path.join（__ dirname，＆＃34; node_modules＆＃34;）}）

假设您的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')
    }
});

Answer 2

所以看起来这是一个已知的错误： like here

我要接受@ nils＆＃39;回答是因为应的工作原理，但在错误解决之前，必须使用在预设中放置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 :(
    }
});

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

2 个答案: