如何在Webpack 2中使用自定义加载程序?

时间:2016-10-10 21:48:38

标签: javascript webpack webpack-2

我正在使用Webpack 2.我为这个项目编写了一个自定义加载器并将其放在./webpack-tools/loaders/my-custom-loader.js中。加载器看起来像这样:

module.exports = function myCustomLoader(input) {
    // Logic for my custom loader
    return stringWithTransformedJS;
};

我已尝试将webpack.config.json配置为使用此自定义加载程序:

// ...
resolveLoader: {
  modulesDirectories: ['./webpack-tools/loaders'],
  extensions: ['.js']
},
module: {
  loaders: [
    // ...
    {
      test: /\.less$/,
      loader: 'myCustomLoader!less'
    },
    // ...
  ]
},
// ...

当我尝试构建我的项目时,我收到以下错误(擦除以删除有关我的项目的识别信息):

SyntaxError: Unexpected token ILLEGAL
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Module._extensions..js (module.js:416:10)
    at Object.require.extensions.(anonymous function) [as .js] (/home/kevin/Programming/my-project/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/home/kevin/Programming/my-project/src/a-file-that-imports-a-LESS-file.js:1:1)
    at Module._compile (module.js:409:26)
    // remainder of stack trace removed for conciseness

(我必须承认,我发现此错误消息非常无用。消息&#34;语法错误:意外的令牌ILLEGAL&#34;没有给我任何线索什么错误,以及我的自定义装载程序并没有出现在完整的痕迹中。)

我已经尝试了几种不同的方式在webpack.config.js中引用我的自定义加载程序,包括:

resolveLoader: {
  alias: {
    myCustomLoader: require.resolve(path.join(__dirname, './webpack-tools/loaders/my-custom-loader.js'))
  }
},

module: {
  loaders: [
    // ...
    {
      test: /\.less$/,
      loader: './webpack-tools/loaders/my-custom-loader.js!less'
    },
    // ...
  ]
},

但无论我使用哪种配置,我都会得到同样的错误。

如何在Webpack 2项目中正确包含自定义加载程序?

0 个答案:

没有答案