[英]Why do i get this Webpack loader Error?
I was trying to add bootstrap in my new React project. 我试图在我的新React项目中添加引导程序。 After running npm install bootstrap and react-bootstrap, i run webpack in my project and i get this Error : What could be the problem ?
运行npm install bootstrap和react-bootstrap之后,我在项目中运行webpack并得到此错误:可能是什么问题?
/home/dove/projects/yulu/node_modules/loader-runner/lib/loadLoader.js:35 throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)");
/home/dove/projects/yulu/node_modules/loader-runner/lib/loadLoader.js:35 throw new Error(“ Module'” + loader.path +“'不是加载器(必须具有正常或音调功能)” );
^
^
Error: Module '/home/dove/projects/yulu/node_modules/url/url.js' is not a loader (must have normal or pitch function) at loadLoader (/home/dove/projects/yulu/node_modules/loader-runner/lib/loadLoader.js:35:10) at iteratePitchingLoaders (/home/dove/projects/yulu/node_modules/loader-runner/lib/LoaderRunner.js:169:2) at runLoaders (/home/dove/projects/yulu/node_modules/loader-runner/lib/LoaderRunner.js:362:2) at NormalModule.doBuild (/home/dove/projects/yulu/node_modules/webpack/lib/NormalModule.js:181:3) at NormalModule.build (/home/dove/projects/yulu/node_modules/webpack/lib/NormalModule.js:274:15) at Compilation.buildModule (/home/dove/projects/yulu/node_modules/webpack/lib/Compilation.js:149:10) at factoryCallback (/home/dove/projects/yulu/node_modules/webpack/lib/Compilation.js:337:12) at factory (/home/dove/projects/yulu/node_modules/webpack/lib/NormalModuleFactory.js:241:5) at applyPluginsAsyncWaterfall (/home/dove/projects/yulu/node_modules/webpack/lib/NormalModuleFactory.js:94:13
错误:在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 ) at /home/dove/projects/yulu/node_modules/tapable/lib/Tapable.js:268:11 at NormalModuleFactory.params.normalModuleFactory.plugin (/home/dove/projects/yulu/node_modules/webpack/lib/CompatibilityPlugin.js:52:5) at NormalModuleFactory.applyPluginsAsyncWaterfall (/home/dove/projects/yulu/node_modules/tapable/lib/Tapable.js:272:13) at resolver (/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)
)在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)
my webpack.config.js 我的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'
}
]
}
}
my package.json 我的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"
}
}
Since wepack 2 it's no longer allowed to omit the -loader
suffix and the loaders are resolved literally. 从wepack 2开始,不再允许省略
-loader
后缀,并且按-loader
解析了加载器。 In your case it uses the npm package url
, which might be a dependency of one of your dependencies. 在您的情况下,它使用npm包
url
,它可能是您的一种依赖项的依赖项。 That package is not a valid loader and therefore fails. 该软件包不是有效的加载程序,因此会失败。
The affected rules need to be changed to: 受影响的规则需要更改为:
{
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'
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.