How is the main.js file created?

Question

I'm trying to reverse engineer an existing codebase that I'm taking over from a previous contractor, and I am having difficulty with figuring out how a specific file, main.js is being created, so that I can modify it.

The code base is a set of javascript files, and there is also a webpack-dev-server based file in the main directory.

I've tried to compile the code using webpack-dev-server using the --watch flag. However, the output main.js file is verbose and well-formatted, while the main.js file being currently produced is minified and compressed. I need the main.js file to be produced in the exact same way.

This is the webpack-dev-server file


const webpack = require('webpack');

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

module.exports = {
  output: {
    path: `${__dirname}./../backend/templates`,
    filename: 'main.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'static/index.html',
      alwaysWriteToDisk: true,
    }),
    new HtmlWebpackHarddiskPlugin(),

    new webpack.EnvironmentPlugin({
      API_HOST: null,
      NODE_ENV: 'development',
      DEBUG: false,
    }),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['@babel/plugin-proposal-class-properties'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'babel-loader',
          },
          {
            loader: 'react-svg-loader',
          },
        ],
      },
    ],
  },
};

This is a snippet of the main.js file that SHOULD be produced:

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var a=t[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,n),a.l=!0,a.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)n.d(r,a,function(t){return e[t]}.bind(null,a));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=234)}([function(e,t,n){e.exports=n(143)()},function(e,t,n){"use strict";e.exports=n(115)},function(e,t,n){var r=n(46),a=n(130),o=n(131),i=n(15),u=n(36),c=n(16),l=Object.prototype.hasOwnProperty,s=o(function(e,t){if(u(t)||i(t))a(t,c(t),e);else for(var n in t)l.call(t,n)&&r(e,n,t[n])});e.exports=s},function(e,t,n){var

It has the following comments:

/*
object-assign
(c) Sindre Sorhus
@license MIT
/** @license React v16.5.2
 * react.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
 /** @license React v16.5.2
 * react-dom.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
/
/** @license React v16.5.2
 * schedule.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
 /** @license React v16.5.2
 * react-is.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

And this is a snippet main.js file that IS being produced by webpack-dev-server:

"use strict";
eval("__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (function(x) {
  return x === null ? NaN : +x;
});


//# sourceURL=webpack:///./node_modules/d3-array/src/number.js?");

As you can see, the webpack-dev-server version is more verbose. There are also comments in the real main.js file that refer to react.production.min.js and other similar files. I think the min refers to minification. However, I haven't been able to figure out which packages or products to use to actually create the file in the exact same way.

How is the main.js file created?

0 Answers