为啥我会收到此 Webpack 加载程序错误？

Posted 2023-02-19

【中文标题】为啥我会收到此 Webpack 加载程序错误？

【英文标题】：Why do i get this Webpack loader Error?为什么我会收到此 Webpack 加载程序错误？

【发布时间】：2018-01-22 07:22:05

【问题描述】：

我试图在我的新 React 项目中添加引导程序。 运行 npm install bootstrap 和 react-bootstrap 后，我在我的项目中运行 webpack，我得到这个错误：可能是什么问题？

/home/dove/projects/yulu/node_modules/loader-runner/lib/loadLoader.js:35 throw new Error("Module '" + loader.path + "' 不是 loader (必须有 normal 或 pitch 功能)");

^

错误：模块 '/home/dove/projects/yulu/node_modules/url/url.js' 是 不是装载机（必须具有正常或俯仰功能） 在 loadLoader (/home/dove/projects/yulu/node_modules/loader-runner/lib/loadLoader.js:35:10) 在 iteratePitchingLoaders (/home/dove/projects/yulu/node_modules/loader-runner/lib/LoaderRunner.js:169:2) 在 runLoaders (/home/dove/projects/yulu/node_modules/loader-runner/lib/LoaderRunner.js:362:2) 在 NormalModule.doBuild (/home/dove/projects/yulu/node_modules/webpack/lib/NormalModule.js:181:3) 在 NormalModule.build (/home/dove/projects/yulu/node_modules/webpack/lib/NormalModule.js:274:15) 在 Compilation.buildModule (/home/dove/projects/yulu/node_modules/webpack/lib/Compilation.js:149:10) 在 factoryCallback (/home/dove/projects/yulu/node_modules/webpack/lib/Compilation.js:337:12) 在工厂（/home/dove/projects/yulu/node_modules/webpack/lib/NormalModuleFactory.js:241:5） 在 applyPluginsAsyncWaterfall (/home/dove/projects/yulu/node_modules/webpack/lib/NormalModuleFactory.js:94:13) 在/home/dove/projects/yulu/node_modules/tapable/lib/Tapable.js:268:11 在 NormalModuleFactory.params.normalModuleFactory.plugin (/home/dove/projects/yulu/node_modules/webpack/lib/CompatibilityPlugin.js:52:5) 在 NormalModuleFactory.applyPluginsAsyncWaterfall (/home/dove/projects/yulu/node_modules/tapable/lib/Tapable.js:272:13) 在解析器（/home/dove/projects/yulu/node_modules/webpack/lib/NormalModuleFactory.js:69:10） 在 process.nextTick (/home/dove/projects/yulu/node_modules/webpack/lib/NormalModuleFactory.js:194:7) 在 _combinedTickCallback (internal/process/next_tick.js:131:7) 在 process._tickCallback (internal/process/next_tick.js:180:9)

我的 webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports =

  entry :

    app :'./app/app.jsx',

  ,

  output :
    path : __dirname,
    filename: './client/bundle.js'
  ,
  resolve :

    alias : 

      //Utilities: path.resolve(__dirname, 'src/utilities/'),
      //Templates: path.resolve(__dirname, 'src/templates/')

    ,
    extensions : ['.js','.jsx']
  ,
  module :

    loaders: [
      
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: 
          presets: ['es2015', 'react']
        ,
        exclude :/(node_modules|bower_components)/
      ,
      
        test: /\.css$/,
        loader: "style-loader!css-loader"
      ,
      
        test: /\.png$/,
        loader: "url-loader?limit=100000"
      ,
      
        test: /\.jpg$/,
        loader: "file-loader"
      ,
      
        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=application/font-woff'
      ,
      
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=application/octet-stream'
      ,
      
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file'
      ,
      
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=image/svg+xml'
      
    ]
  

我的 package.json

  
  "name": "yulu",
  "version": "1.0.0",
  "description": "This is a business advertising website",
  "main": "server.js",
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  ,
  "author": "@magic wand",
  "license": "MIT",
  "dependencies": 
    "bootstrap": "^3.3.7",
    "express": "^4.15.4",
    "react": "^15.6.1",
    "react-bootstrap": "^0.31.2",
    "react-dom": "^15.6.1",
    "react-router": "^4.1.2"
  ,
  "devDependencies": 
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "exports-loader": "^0.6.4",
    "file-loader": "^0.11.2",
    "imports-loader": "^0.7.1",
    "node-sass": "^4.5.3",
    "postcss-loader": "^2.0.6",
    "resolve-url-loader": "^2.1.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^3.5.4"
  

【参考方案1】：

自从 wepack 2 不再允许 omit the -loader suffix 并且加载程序被逐字解析。在您的情况下，它使用 npm package url，这可能是您的依赖项之一的依赖项。该包不是有效的加载器，因此会失败。

受影响的规则需要更改为：

  test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
  loader: 'url-loader?limit=10000&mimetype=application/font-woff'
,

  test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
  loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
,

  test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
  loader: 'file-loader'
,

  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  loader: 'url-loader?limit=10000&mimetype=image/svg+xml'