Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Configuring Webpack

Alan Mills
Alan Mills
31,712 Points
Posted by Alan Mills
Alan Mills
31,712 Points

Webpack CLI has moved into a separate package.

Any help is appreciated. When I attempt to minify my bundle with either a custom build script or node_modules/.bin/webpack: The execution fails, telling me that the CLI is in a separate package. I tried to install the webpack-cli package using "npm install --save-dev webpack-cli". When I attempt to build, I get the following:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

  • configuration.module has an unknown property 'loaders'. These properties are valid: object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? } -> Options affecting the normal modules (NormalModuleFactory). npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! ReactScoreboard@1.0.0 build: webpack npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the ReactScoreboard@1.0.0 build 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:\Users\aelon\AppData\Roaming\npm-cache_logs\2018-03-13T15_56_22_342Z-debug.log

1 Answer

Sean Iams
Sean Iams
2,006 Points
Sean Iams
Sean Iams
2,006 Points

You're probably using Webpack 4, and it looks like they changed some basic/foundational things about the config setup...

  • the format/scheme of the webpack.config.js file is different
  • webpack-cli is in a different library

My webpack.config.js file looks like this now, and it works:

module.exports = {
  entry: './src/app.js',

  output: {
    path: __dirname + '/build',
    filename: 'bundle.js'
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {loader: 'babel-loader'},
        ],
        exclude: /node_modules/
      }
    ]
  }
}

Also, when installing webpack-cli, make sure you use:

npm install --save-dev webpack-cli -D