1
Whenever I build my project, the output is always the file generated by the webpack, with no signals that have passed through Babel.
My settings are 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 products with a.log console); and the app.js that has a controller import and instance the class and calls its main method.
The dist/main.js file (the output file in 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 think if he’s supposed to go through Babel, that wouldn’t be the way out. Could someone tell me how to properly configure the project so that Babel can transpose the js?