Команда webpack добавляет длинные комментарии внизу файла. js, конвертируемого из файла .ts

Question

Я бэкэнд-разработчик и только начал пробовать свои силы в технологиях пользовательского интерфейса. Я делал несколько PO C для преобразования файла машинописного файла (.ts) в файл javascript (. js) с помощью команды webpack. Он конвертируется в файл js и отлично работает в реальном проекте. Но проблема в том, что он добавляет длинные комментарии внизу файла .ts. Из-за этого размер файла становится 830 + кб. Если я удаляю комментарии, то его размер уменьшается до 130 КБ.

Вот файлы конфигурации, которые я использую в своем проекте:

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"
        ]
    }
}

Для преобразования .ts to. js Я использую простую команду webpack.

Вывод. js код файла выглядит так:

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

Я пробовал ниже вещей

• uglify
• mode - production

Пожалуйста, предложите. Заранее спасибо.

Answer 1

Это исходные карты.

Вы не сможете их сгенерировать, установив переменную окружения в среде, из которой вы строите.

GENERATE_SOURCEMAP=false

Ссылка: https://github.com/facebook/create-react-app/issues/2787#issuecomment -434943749

В качестве альтернативы, вы можете получить более точный контроль над генерацией исходной карты Webpack на основе документации здесь: https://webpack.js.org/configuration/devtool/