Targets for Webpack’s Babel Loader: Exploring Shell’s Implementation

To begin with, ensure that you know the version of babel you are using. For this particular setup, I am relying on an external .babelrc file where you can include the stage0 variable. While you might have added it in the query, I have not tried that approach. My setup works perfectly with an external file, and I did not require the es2015. You need to make some changes to the webpack.config file. If you need more information on how to configure it, refer to this link: https://gist.github.com/nojaf/daf886031072b572bc9a. The solution to my problem was that in the webpack configuration, I was only checking for js files since my codebase only had js files.


Solution:

Although I cannot pinpoint the exact issue, I do notice some things that seem amiss.

To ensure proper setup, it is important to know the version of babel being used. In this case, my setup is dependent on this information.

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

To include the stage0 variable, it’s recommended to create an external .babelrc file instead of adding it to the query. I have personally tried and tested this method, and it works perfectly without the need to specify es2015.

{stage:0}

For Windows users, a workaround is necessary to resolve the path issue. My configuration is implemented using this method.

Header:

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

When determining your entry point, take into account the real 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'}
]
  }

Additionally, include a “resolve” at the end of your webpack configuration as a workaround to rectify the path issue.

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

For those who intend to utilize node variables in both development and production environments, it is suggested to refer to the response provided in this post: What could be the reason for the huge size of my webpack bundle.js and vendor.bundle.js files?

Frequently Asked Questions