最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】webpack出错:Error: options/query provided without loader (use loader + options) in

Webpack crifan 2418浏览 0评论

折腾:

【已解决】Webpack打包出错:ERROR in Entry module not found Cannot resolve file or directory

期间,已经解决了:

【已解决】webpack打包出错:Error Cannot find module tapable

但是接着又出错了。

代码:

webpack.config.js

  module: {
    rules: [
      {
        test: /\.js$/,
        // use: [‘react-hot-loader’, ‘babel-loader’],
        use: [‘babel-loader’],
        include: path.resolve(__dirname, ‘src’),
        exclude: /(node_modules|bower_components)/
      },
      {
        test: /\.css$/,
        use: [‘style-loader’, ‘css-loader’],
        include: path.resolve(__dirname, ‘src’)
      },
      {
        test: /\.(svg|woff2?|ttf|eot|jpe?g|png|gif)$/i,
        //development use url-loader, production use file-loader
        use: isProd ? ‘file-loader’ : ‘url-loader’,
        options:
          isProd ?
          {
            // for file-loader
            // name: ‘[path][name].[ext]?[md5:hash:base64:6]’
            name: ‘[path][name]_[md5:hash:base64:6].[ext]’
          } : {
            // for url-loader
            // inline base64 URLs for <=4k images, direct URLs for the rest
            limit: 4096,
            // prefix: ‘/adminlte/’
          }
      }
    ]
  },

错误:

➜  react-hot-boilerplate git:(master) ✗ webpack –progress –colors –display-error-details
process.env.NODE_ENV=undefined, isProd=false
/usr/local/lib/node_modules/webpack/lib/RuleSet.js:179
            throw new Error(RuleSet.buildErrorMessage(rule, new Error(“options/query provided without loader (use loader + options)”)));
            ^
Error: options/query provided without loader (use loader + options) in {
  “test”: {},
  “use”: “url-loader”,
  “options”: {
    “limit”: 4096
  }
}
    at Function.normalizeRule (/usr/local/lib/node_modules/webpack/lib/RuleSet.js:179:10)
    at rules.map (/usr/local/lib/node_modules/webpack/lib/RuleSet.js:86:20)
    at Array.map (native)
    at Function.normalizeRules (/usr/local/lib/node_modules/webpack/lib/RuleSet.js:85:17)
    at new RuleSet (/usr/local/lib/node_modules/webpack/lib/RuleSet.js:80:24)
    at NormalModuleFactory (/usr/local/lib/node_modules/webpack/lib/NormalModuleFactory.js:49:18)
    at Compiler.createNormalModuleFactory (/usr/local/lib/node_modules/webpack/lib/Compiler.js:480:31)
    at Compiler.newCompilationParams (/usr/local/lib/node_modules/webpack/lib/Compiler.js:493:30)
    at Compiler.compile (/usr/local/lib/node_modules/webpack/lib/Compiler.js:501:23)
    at readRecords.err (/usr/local/lib/node_modules/webpack/lib/Compiler.js:283:11)
    at Compiler.readRecords (/usr/local/lib/node_modules/webpack/lib/Compiler.js:395:11)
    at applyPluginsAsync.err (/usr/local/lib/node_modules/webpack/lib/Compiler.js:280:10)
    at next (/usr/local/lib/node_modules/webpack/node_modules/tapable/lib/Tapable.js:202:11)
    at Compiler.compiler.plugin (/usr/local/lib/node_modules/webpack/lib/CachePlugin.js:35:59)
    at Compiler.applyPluginsAsyncSeries (/usr/local/lib/node_modules/webpack/node_modules/tapable/lib/Tapable.js:206:13)
    at applyPluginsAsync.err (/usr/local/lib/node_modules/webpack/lib/Compiler.js:277:9)
    at next (/usr/local/lib/node_modules/webpack/node_modules/tapable/lib/Tapable.js:202:11)
    at Compiler.compiler.plugin (/usr/local/lib/node_modules/webpack/lib/node/NodeEnvironmentPlugin.js:21:4)
    at Compiler.applyPluginsAsyncSeries (/usr/local/lib/node_modules/webpack/node_modules/tapable/lib/Tapable.js:206:13)
    at Compiler.run (/usr/local/lib/node_modules/webpack/lib/Compiler.js:274:8)
    at processOptions (/usr/local/lib/node_modules/webpack/bin/webpack.js:383:13)
    at yargs.parse (/usr/local/lib/node_modules/webpack/bin/webpack.js:387:2)
    at Object.Yargs.self.parse (/usr/local/lib/node_modules/webpack/node_modules/yargs/yargs.js:533:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/webpack/bin/webpack.js:152:7)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Function.Module.runMain (module.js:605:10)
➜  react-hot-boilerplate git:(master) ✗

webpack Error: options/query provided without loader (use loader + options) in {

Error: options/query provided without loader. Webpack 2.2.0-rc.3 · Issue #3645 · webpack/webpack

     {
        test: /\.(svg|woff2?|ttf|eot|jpe?g|png|gif)$/i,
        //development use url-loader, production use file-loader
        use: isProd ?
          {
            loader: ‘file-loader’,
            query: {
              // name: ‘[path][name].[ext]?[md5:hash:base64:6]’
              name: ‘[path][name]_[md5:hash:base64:6].[ext]’
            }
          } :
          {
            loader: ‘url-loader’,
            query: {
            // inline base64 URLs for <=4k images, direct URLs for the rest
            limit: 4096,
            // prefix: ‘/adminlte/’
            }
          }
      }

结果,终于正常编译了:

➜  react-hot-boilerplate git:(master) ✗ webpack –progress –colors –display-error-details
process.env.NODE_ENV=undefined, isProd=false
Hash: a736a31d7acdf6e54525
Version: webpack 3.5.4
Time: 5780ms
           Asset     Size  Chunks                    Chunk Names
        index.js  4.47 MB       0  [emitted]  [big]  index
vendor.bundle.js  31.7 kB       1  [emitted]         vendor
[240] (webpack)/buildin/global.js 509 bytes {0} [built]
[306] ./src/index.js 573 bytes {0} [built]
[404] ./src/App.js 16.2 kB {0} [built]
[778] ./src/app.css 994 bytes {0} [built]
[779] ./node_modules/css-loader!./src/app.css 1.22 kB {0} [built]
[781] ./src/assets/img/user1-128×128.jpg 3.88 kB {0} [built]
[784] multi react-hot-loader/patch ./src/adminlte_app.js 40 bytes {1} [built]
[788] ./src/adminlte_app.js 23 kB {1} [built]
    + 781 hidden modules

【总结】

此处,不能混用use+query,

要么是:use+options

要么是:use+某个loader(及其对应的参数query)

具体写法为:

  module: {
    rules: [
      {
        test: /\.js$/,
        // use: [‘react-hot-loader’, ‘babel-loader’],
        use: [‘babel-loader’],
        include: path.resolve(__dirname, ‘src’),
        exclude: /(node_modules|bower_components)/
      },
      {
        test: /\.css$/,
        use: [‘style-loader’, ‘css-loader’],
        include: path.resolve(__dirname, ‘src’)
      },
      {
        test: /\.(svg|woff2?|ttf|eot|jpe?g|png|gif)$/i,
        //development use url-loader, production use file-loader
        use: isProd ?
          {
            loader: ‘file-loader’,
            query: {
              // name: ‘[path][name].[ext]?[md5:hash:base64:6]’
              name: ‘[path][name]_[md5:hash:base64:6].[ext]’
            }
          } :
          {
            loader: ‘url-loader’,
            query: {
            // inline base64 URLs for <=4k images, direct URLs for the rest
            limit: 4096,
            // prefix: ‘/adminlte/’
            }
          }
      }
    ]
  },

转载请注明:在路上 » 【已解决】webpack出错:Error: options/query provided without loader (use loader + options) in

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
61 queries in 0.137 seconds, using 18.92MB memory