0

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

Corey
  • 351
  • 1
  • 2
  • 14

1 Answers1

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
  }
};
Drew Schuster
  • 2,521
  • 12
  • 15
  • Is that equivalent to what I have. `module` with a property of `loaders` is the same as `module.loaders`. – Corey Jan 01 '17 at 19:31
  • It is not equivalent to what you have, loaders is in the wrong place so webpack doesn't see it. https://webpack.github.io/docs/configuration.html#module-loaders Same as if you named it foo instead of loaders – Drew Schuster Jan 01 '17 at 20:30
  • Thanks Drew. That was the issue. It seemed weird that it was `module.exports.module.loaders` but that worked. – Corey Jan 04 '17 at 14:57