0

I'm trying to generate bundle.js but webpack doesn't work.

Here's the error I've got:

C:\Users\myname\Documents\lynda\ECMAScript6\Ch02\02_02\youtube2>webpack
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?, exp
rContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unkn
ownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache
?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, str
ictExportPresence?, strictThisContextOnImports? }
   -> Options affecting the normal modules (`NormalModuleFactory`).
 - configuration.output.path: The provided value "dist" is not an absolute path!

   -> The output directory as **absolute path** (required).

Here's my congif file:

module.exports = {

  entry: './src/script.js',

  output: {
    path: 'dist',
    filename: 'bundle.js'
  },

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


};

I've been following many tutorials about babel-loader but every time I get this type of error and won't work.

kayak
  • 440
  • 3
  • 7
  • 19

2 Answers2

0

Try following :

module.exports = {

  entry: './src/script.js',

  output: {
    path: './dist',
    filename: 'bundle.js'
  },

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


};

I have changed path property to ./dist && module.rules is a valid value instead of module.loaders. For configuring loaders section , i referred following git documentation for babel-loader : See Usage Section

Nish26
  • 969
  • 8
  • 16
  • Thank you. I just changed my config and it started to say... "- configuration.output.path: The provided value "dist" is not an absolute path! -> The output directory as **absolute path** (required)." I've already created dist folder, and tried to change the path to "dist" or "../dist" but it won't work. – kayak Mar 22 '18 at 19:46
  • This seems to be a bug in one of the versions of webpack . Please check if suggestions provided in the issue link helps you : [Issue link](https://github.com/webpack/webpack/issues/4549) – Nish26 Mar 22 '18 at 20:10
0

Awhile ago, webpack changed the config format. I recommend not using es2015, instead to adding a .babelrc file to your root and switching to babel-preset-env.

const path = require("path");
const distPath = `${__dirname}${path.sep}dist`;

module.exports = {
  entry: './src/script.js',
  output: {
    path: distPath,
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                'babel-preset-env'
              ]
            }
          }
        ]
      }
    ]
  }
};
Lumpy Wizard
  • 143
  • 1
  • 5
  • Thank you, I didn't know the change. However now I've got an error says the path is invalid, like "- configuration.output.path: The provided value "dist" is not an absolute path! -> The output directory as **absolute path** (required)." ... – kayak Mar 22 '18 at 19:48
  • Thank you, I can learn a lot from you. However I still get an error says "loader: 'babel-loader', SyntaxError: Unexpected token :". It seems that there's some problems about "babel-loader" ... – kayak Mar 22 '18 at 20:10
  • @kayak My bad, I neglected to add curly braces around the loader and options. – Lumpy Wizard Mar 22 '18 at 21:03
  • Thanks again! This time I got no errors. Actually I'm quite new on this... so, if I write some code in script.js, the converted code will appear in bundle.js, is it correct? I was asking because right now I don't see any translated code in bundle.js, all it gives is like "!function(e){var..." ... – kayak Mar 22 '18 at 21:37
  • Just solved the problem! I added "mode: 'development'," below "module.exports = {" and it worked. Thank you so much for your help! I really appreciate it. – kayak Mar 22 '18 at 22:37