Webpack预加载器如何工作？

Question

I'm building a node app and I'm using webpack to process my client side scripts. I'm using webpack node api and on my app bootstrap file I simply do this:

    const webpack = require('webpack')
    const webpackConfig = require('./webpack.config.js')

    webpack(webpackConfig, (err, stats) => {
        if (err || stats.hasErrors()) {
           //do something with that
        }
    })

This works well until I try to write with ES6 syntax. Although I have defined in my webpack.config.js that babel should be used to pre-process the files it simply doesn't work. It says that there is a syntax error.

this is my webpack.config.js

module.exports = {
    context: __dirname,
    entry: "./resources/assets/js/main.js",
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use : {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "es2015",
                            "es2016",
                            "stage-2"
                        ]
                    }
                }
            }
        ]
    }
}

this is my package.json

{
  "name": "topo",
  "version": "1.0.0",
  "description": "Node app test",
  "main": "index.js",
  "dependencies": {
    "nodemon": "^1.11.0"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2016": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "pug": "^2.0.0-beta11",
    "webpack": "^2.3.3"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "António Quadrado",
  "license": "ISC"
}

I found multiple problems regarding webpack and ES6 with babel and I tried to work it out with the solutions that were given on those situations but I failed to make it work and that's why I posting my specific case, hoping that someone can point me to my error.

I'm not just looking for the solution to this particular problem but also to understand how the webpack and its pre-loaders work so I can avoid situations like this in the future.

I'm using node v7.8.0

Thank you.

Answer 1

use expects an array of loaders to use for a particular rule. Since you only have a single loader in your rule, you should just put all of the loader properties directly inside that rule (dropping use entirely):

rules: [
  {
    test: /\.js$/,
    loader: "babel-loader",
    options: {
      presets: [
        "es2015",
        "es2016",
        "stage-2"
      ]
    }
  }
]

If you had to use use , it would look like this instead:

rules: [
  {
    test: /\.js$/,
    use: [
      {
        loader: "babel-loader",
        options: {
          presets: [
            "es2015",
            "es2016",
            "stage-2"
          ]
        }
      }
    ]
  }
]