Whenever I run the build of my project, the output is always the file generated by the webpack, with no signs that it has passed Babel.
My settings look like this:
package.json
{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build:watch": "webpack -w --mode development",
"build:prod": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"babel-loader": "^8.0.4",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2"
}
}
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
filename: 'main.js',
path: path.resolve('dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
}
}
.babelrc
{
"presets": ["@babel/preset-env"]
}
In the src folder, I have 3 files: Product: A simple class with 2 attributes; ProductController: A class that imports Product and has 2 methods only (creates and lists the products with a console.log); and app.js which has a controller import and instantiates the class and calls its main method.
The file dist / main.js (the file that is output to the webpack conf file) always has this result:
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./src/app.js");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./src/app.js":
/*!********************!*\
!*** ./src/app.js ***!
\********************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _controllers_ProductController__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./controllers/ProductController */ \"./src/controllers/ProductController.js\");\n\nvar controller = new _controllers_ProductController__WEBPACK_IMPORTED_MODULE_0__[\"ProductController\"]();\ncontroller.listProducts();\n\n//# sourceURL=webpack:///./src/app.js?");
/***/ }),
/***/ "./src/controllers/ProductController.js":
/*!**********************************************!*\
!*** ./src/controllers/ProductController.js ***!
\**********************************************/
/*! exports provided: ProductController */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ProductController\", function() { return ProductController; });\n/* harmony import */ var _models_Product__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./../models/Product */ \"./src/models/Product.js\");\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\n\nvar ProductController =\n/*#__PURE__*/\nfunction () {\n function ProductController() {\n _classCallCheck(this, ProductController);\n }\n\n _createClass(ProductController, [{\n key: \"addProduct\",\n value: function addProduct() {\n var products = [];\n products.push(new _models_Product__WEBPACK_IMPORTED_MODULE_0__[\"Product\"]('Notebook', 900.0));\n products.push(new _models_Product__WEBPACK_IMPORTED_MODULE_0__[\"Product\"]('Impressora', 900.0));\n return products;\n }\n }, {\n key: \"listProducts\",\n value: function listProducts() {\n this.addProduct().forEach(function (product) {\n return console.log(product);\n });\n }\n }]);\n\n return ProductController;\n}();\n\n//# sourceURL=webpack:///./src/controllers/ProductController.js?");
/***/ }),
/***/ "./src/models/Product.js":
/*!*******************************!*\
!*** ./src/models/Product.js ***!
\*******************************/
/*! exports provided: Product */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Product\", function() { return Product; });\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nvar Product = function Product(name, price) {\n _classCallCheck(this, Product);\n\n this._name = name;\n this._price = price;\n};\n\n//# sourceURL=webpack:///./src/models/Product.js?");
/***/ })
/******/ });
I believe that if it is for him to go through the Babel, the exit would not be this. Could someone tell me how I can properly configure the project so that Babel can transpile the js?