webpack command is adding long comments in bottom of .js file being converted from .ts file

Question

I am backend developer and just started trying my hands on UI technologies. I was doing some POC to convert typescript file(.ts) file to javascript(.js) file using webpack command. It is converting to js file and working fine in live project too. But the problem is it adds long comments in the bottom of .ts file. Because of that the file size becomes 830+kb. If I remove comments then its size reduces to 130 kbs.

Here are config files which I am using in my project:

package.json

{
  "name": "testprojwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@ionic-native/core": "^5.19.1",
    "@ionic-native/in-app-browser": "^5.19.1",
    "lodash-webpack-plugin": "^0.11.5",
    "rxjs": "^6.5.4",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.5",
    "webpack-dev-server": "^3.10.1"
  },
  "devDependencies": {
    "terser-webpack-plugin": "^2.3.2",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
}

webpack.config.json

const path = require('path');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');


module.exports = {
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  module: {
    rules: [{
      test: /\.tsx?$/,
      use: 'ts-loader',
      exclude: /node_modules/
    }]
  },
  mode: 'production',
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new LodashModuleReplacementPlugin
  ],
  optimization: {
    nodeEnv: 'production',
    minimize: true
  }
};

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": false,
        "noImplicitAny": true,
        "module": "commonjs",
        "moduleResolution": "node",
        "target": "es6",
        "allowJs": false,
        "lib": [
            "es2017",
            "dom"
        ]
    }
}

To convert .ts to .js I am using simple webpack command.

The output .js files code looks like :

<code in js format>
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vd2VicGFjay9ib290c3RyYXAiLCJ3ZWJwYWNrOi8vLy4vbm9kZV9tb2R1bGVzL3RzbGliL3RzbGliLmVzNi5qcyIsIndlYnBhY2s6Ly8vLi9ub2RlX21vZHVsZXMvcnhqcy9fZXNtNS9pbnRlcm5hbC9TdWJzY3JpYmVyLmpzIiwid2VicGFjazbla...bla...bla...

I have tried below things

• uglify
• mode - production

Kindly suggest. Thanks in advance.

Answer 1

Those are sourcemaps.

You should be able to NOT generate them by setting an environment variable in the environment you're building from.

GENERATE_SOURCEMAP=false

Reference: https://github.com/facebook/create-react-app/issues/2787#issuecomment-434943749

Alternatively, you can gain finer control of Webpack sourcemap generation based on documentation here: https://webpack.js.org/configuration/devtool/