babel-loader not transpiling

Question

I'm trying to get my head around webpack and to do so I'm building a small webpack project.

So far it moves my two entry points and their dependencies to the dist folder, but none of the files are transpiled. I've set up babel-loader and installed the correct presets but still nothing seems to work.

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  context: __dirname,
  entry: {
    main: "./main",
    renderer: "./app/js/renderer"
  },
  output: {
      path: __dirname + "/dist",
      filename: "[name].bundle.js"
  },
  target: "electron",
  plugins: [new HtmlWebpackPlugin({
    title: 'Electron Test',
    chunks: ['renderer'],
    inject: 'body',
    hash: 'true'
  })],
  loaders: [
    {
      test: /\.js$/,
      exclude: /(node_modules|dist)/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'stage-0']
      }
    }
  ]
};

Have I missed something out here?

My package.json is as follows:

    {
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "Electron boilerplate with ES6, SCSS and packaging.",
  "main": "main.js",
  "scripts": {
    "start": "npm run build && electron lib",
    "build": "rm -rf ./dist && webpack ."
  },
    "keywords": [
    "Electron",
    "boilerplate"
  ],
  "author": "CWright",
  "license": "CC0-1.0",
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-stage-0": "^6.5.0",
    "html-webpack-plugin": "^2.22.0",
    "webpack": "^1.13.2",
    "webpack-validator": "^2.2.7"
  },
  "dependencies": {
    "electron": "^1.3.2" 
  }
}

score 1 · Accepted Answer · edited May 23 '17 at 12:14

I'm not really sure about whats is wrong but i see somethings here.

First, be sure to what version of babel you're running, for this setup I'm based on the

 "babel-core": "5.8.25",
 "babel-loader": "5.3.2"

1 - Create an external .babelrc file ant in it you put the stage0 variable, I've noticed you did put in the query, and I haven't tried as you did, but mine works fine as external file, I did not needed to put the es2015.

{stage:0}

2 - If you are on windows, you should use a workaround to fix the path, I do use my config like this:

Header:

const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require("path");
const srcPath = path.join(__dirname, 'src');

3 - Your entry point should consider the actual path:

 entry: {
    app: path.join(srcPath, 'main.js') // see that the srcPath is the folder 'src' mapped in the const, this should be where your js files are to be loaded from.
}

4 - The output folder

output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "./dist"),
    publicPath: "",
  }

5 - And to the loader:

 module: {
    loaders: [
      {test: /\.js?$/, exclude: /node_modules/, loader: 'babel?cacheDirectory'}
]
  }

6 - Also add a resolve to the end of your webpack config, this is part of the workaround to fix the path:

 resolve: {
    extensions: ["", ".js"],
    modulesDirectories: ["src", "node_modules"],
    root: [__dirname + path.sep + 'scripts'],
  }

And if you wanto to use node variables for dev and prod enviroments, check this anwser: Why is my webpack bundle.js and vendor.bundle.js so incredibly big?

It was the fact I hadn't wrapped the loaders in a module object! Thanks. — CWright, Aug 25 '16 at 16:37
@ViniciusVieira My CSS and images are getting left out when transpiling using babel. Any idea how to resolve this? — Prakhar Mittal, Mar 01 '20 at 09:24
@PrakharMittal witch version of webpack are you using? Do you want all of them to be turned into base64? — Vinicius Vieira, Mar 05 '20 at 17:35
@ViniciusVieira I have a webpack of 4.41 version and babel of 7.8 version. What I want is to make a package, publish it to npm without building and then install it into a new CRA and use it there. https://stackoverflow.com/questions/60077150/using-self-made-npm-package-in-react-failed-to-compile/60143350#60143350. From here I got to know that to use that installed package now I have to transpile it. But the issue is my js/jsx are getting transpiled from ES6 to ES5 but the images and CSS aren't coming into the new transpiled folder. — Prakhar Mittal, Mar 08 '20 at 06:36

babel-loader not transpiling

1 Answers1