Question

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

/home/dove/projects/yulu/node_modules/loader-runner/lib/loadLoader.js:35                 抛出新的错误（＆＃34;模块＆＃39;＆＃34; + loader.path +＆＃34;＆＃39;不是加载器（必须具有普通或音调功能）＆＃34;）;

^

错误：模块＆＃39; /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）       at /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）       at process.nextTick（/home/dove/projects/yulu/node_modules/webpack/lib/NormalModuleFactory.js:194:7）       at _combinedTickCallback（internal / process / next_tick.js：131：7）       at 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"
  }
}

Answer 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'
}

为什么我得到这个Webpack加载器错误？

1 个答案: