Webpack.config.js Loaders Array not being used.

Question

Is anyone here seasoned with Webpack? I'm playing around with it and running into an issue pretty early on. In the attached GIST my webpack.config.js doesn't seem to want to use the loaders array for any included files. If I inline the loaders they work, but otherwise it tells me I'm missing a loader. Any ideas?

https://gist.github.com/coreysnyder/5e4b02ad11cf1ace52cceca59fb7045d

Answer 1

It should be module.loaders, not loaders.

var webpack = require('webpack');

module.exports = {
  context: __dirname + '/app',
  module: {
    loaders: [
      {test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.png$/, loader: "url-loader?limit=100000" },
      { test: /\.jpg$/, loader: "file-loader" },
      {test: /\.woff(\?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" },
      {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff"},
      {test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,loader: "file-loader"}
    ],
  },
  entry: {
    app: ['./app.js', './app.css'],
    vendor: [
      'angular',
      'angular-route',
      'underscore',
      '!style-loader!css-loader!app.css', // This works fine as it's a simple 1 definition css file
      '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css' // This blows up trying to process the font files
      'app.css',  // This doesn't work b/c `You may need an appropriate loader to handle this file type.`
      'bootstrap/dist/css/bootstrap.css' // This doesn't work b/c `You may need an appropriate loader to handle this file type.`
    ]
  },
  output: {
    path: __dirname + '/app/dist',
    filename: 'app.bundle.js',
    publicPath: '/dist'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
  ],
  devServer: {
    contentBase: "./app",
    hot: false
  }
};