"模块'" + loader.path +"'不是加载器webpack错误

时间:2017-04-01 13:27:24

标签: webpack

webpack版本 - 2.3.2

节点版本-4.6.1

我得到了这个奇怪的错误

    /home/ubuntu/workspace/node_modules/webpack/node_modules/loader-runner/lib/loadLoader.js:35
                        throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)");
                        ^

Error: Module '/home/ubuntu/workspace/node_modules/file/lib/file.js' is not a loader (must have normal or pitch function)
    at loadLoader (/home/ubuntu/workspace/node_modules/webpack/node_modules/loader-runner/lib/loadLoader.js:35:10)
    at iteratePitchingLoaders (/home/ubuntu/workspace/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at runLoaders (/home/ubuntu/workspace/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:362:2)
    at NormalModule.doBuild (/home/ubuntu/workspace/node_modules/webpack/lib/NormalModule.js:179:3)
    at NormalModule.build (/home/ubuntu/workspace/node_modules/webpack/lib/NormalModule.js:268:15)
    at Compilation.buildModule (/home/ubuntu/workspace/node_modules/webpack/lib/Compilation.js:142:10)

我检查了github的问题和答案。看起来我需要在所有使用的加载器中添加-loaders。但是,我已经在使用-loaders了。查看我的webpack配置

    var webpack = require("webpack");
var path = require("path");
var ExtractTextPlugin = require('extract-text-webpack-plugin');


module.exports = {
  entry: {app: './src/app.js' },
  output: {filename: 'public/build/bundle.js',
        sourceMapFilename: 'public/build/bundle.map' },
  module: {
    loaders: [
      { test: /\.(js|jsx)$/, loader: 'babel-loader',options: {
        presets: ['stage-0','react','es2015'],
        plugins: ["transform-decorators-legacy","transform-class-properties"]
    } },
      { test: /\.css$/, loaders: [ 'style-loader', 'css-loader' ] },
      { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=public/fonts/[name].[ext]'  },
   {
  test: /\.(jpe?g|png|gif|svg)$/i,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[sha512:hash:hex].[ext]'
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true,
        mozjpeg: {
          progressive: true
        },
        gifsicle: {
          interlaced: true
        },
        optipng: {
          optimizationLevel: 7
        }
      }
    }
  ]
}
    ]
  }
}

stackoverflow上没有其他线程可以解决此问题。这就是为什么我必须打开一个新线程。

2 个答案:

答案 0 :(得分:6)

问题在于这一行:

{ test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=public/fonts/[name].[ext]' }

您安装了一个名为file的模块,Webpack正在尝试加载。因为它不是加载器,所以你得到错误(AFAIK,任何加载器配置,Webpack将始终首先尝试按名称逐字加载模块,因此在这种情况下file,以及只有当模块不存在时,它才会通过附加-loader重试,所以file-loader;但是,因为file存在,所以Webpack认为找到了正确的加载器模块。 / p>

将其更改为:

{ test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file-loader?name=public/fonts/[name].[ext]' }

答案 1 :(得分:1)

如果您遇到类似问题,请注意webpack2需要loaders的所有名称后缀为-loader

因此,名为url的加载器必须用作url-loader,如下所示。

{
  test: /\.(eot|svg|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?/,
  loader: 'url-loader'
}

另一个例子..

{test: /\.css$/, loader: "style-loader!css-loader"},