Monday, 17 April 2017

How do webpack pre-loaders work?

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.



via António Quadrado

No comments:

Post a Comment