webpack构建react出现的问题

Question

Error: Cannot find module 'url-loader'

at Function.Module._resolveFilename (module.js:555:15)
at Function.resolve (internal/module.js:18:19)
at Object.<anonymous> (F:\react-webpack\webpack.config.js:33:25)
at Module._compile (module.js:660:30)
at Object.Module._extensions..js (module.js:671:10)
at Module.load (module.js:573:32)
at tryModuleLoad (module.js:513:12)
at Function.Module._load (module.js:505:3)
at Module.require (module.js:604:17)
at require (internal/module.js:11:18)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-webpack@1.0.0 server: webpack-dev-server --open
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-webpack@1.0.0 server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:UsersAdministratorAppDataRoamingnpm-cache_logs2018-03-20T01_27_55_831Z-debug.log

F:react-webpack>
这是报的错误

var path =require('path');
module.exports = {

//入口文件
entry:'./app/index.js',
//出口文件
output:{
    filename:'index.js',
    path:path.resolve(__dirname,'dist'),
    publicPath:'temp/'   
},
devServer:{
    contentBase:'./',
    host:'localhost',
    compress:true,
    port:1717
},

// module:{
// loaders:[
// {
// test:/.js$/,
// exclude:/node_modules/,
// loaders:"babel-loader",
// query:{
// presets:['es2015','react']
// }
// }
// ]
// }
module: {

rules: [
  {
    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
    loader: require.resolve('url-loader'),
    options: {
      limit: 10000,
      name: 'static/media/[name].[hash:8].[ext]',
    },
  },
]

}

这是webpack.config.js 文件，这个文件应该配置有错误，那个大神，还是错误呢

Answer 1

module不是这样配置的

module: {
    rules: [
      {
        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        loader: require.resolve('url-loader'),
        options: {
          limit: 10000,
          name: 'static/media/[name].[hash:8].[ext]',
        },
      },
    ]
  }

第一层元素是rules