為什么會出現此Webpack加載器錯誤？

Question

我試圖在我的新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 +“'不是加載器（必須具有正常或音調功能）” ）;

^

錯誤：在loadLoader（/ home / dove / projects / yulu / node_modules / loader-runner）上，模塊'/home/dove/projects/yulu/node_modules/url/url.js'不是加載器（必須具有法線或音高功能） /lib/loadLoader.js:35:10）位於runLoaders（/ home / dove / projects / yulu）的iteratePitchingLoaders（/home/dove/projects/yulu/node_modules/loader-runner/lib/LoaderRunner.js:169:2） /位於NormalModule.build（/home/dove/projects/yulu/node_modules/webpack/lib/NormalModule.js:181:3）的/node_modules/loader-runner/lib/LoaderRunner.js:362:2）（ /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 ）工廠（/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 ）在NormalModuleFactory.params.normalModuleFactory.plugin（/ home / dove / projects / yulu / node_modules / webpack / lib / CompatibilityPlugin中的/home/dove/projects/yulu/node_modules/tapable/lib/Tapable.js:268:11 js：52：5）在解析器（/ home / dove / projects / yulu / node_modules / webpack /處NormalModuleFactory.applyPluginsAsyncWaterfall（/home/dove/projects/yulu/node_modules/tapable/lib/Tapable.js:272:13） 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（內部/進程/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"
  }
}

Answer 1

從wepack 2開始，不再允許省略-loader后綴，並且按-loader解析了加載器。 在您的情況下，它使用npm包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'
}