webpackを使ってjavascriptを圧縮する際、メソッド名と変数名を置き換えられないようにする方法

Question

javascript初心者の高校生です。よろしくお願いいたします。

使用したライブラリのバージョンはwebpackが4.20.1、webpack-cliが3.1.1です。(webpack公式ドキュメント

とても初歩的な質問ですが、webpackを使ってjavascript(es6以降)を圧縮する際にメソッド名と変数名が勝手にeやiに置き換わってしまうのですがこの機能を切って、ただ単に改行やスペース、コメントだけを削除させるようにするにはどうすればよいのでしょうか。
おそらくwebpack.config.jsに何かオプションを指定することができるのだろうとは思うのですが、公式ドキュメントを読んでもどれがそれにあたるのかわからなかったので、、、
オプション名と指定する場所を教えていただければ幸いです。

もう1点、次のようなコードを書き、
<test.js>

const webpack = require("webpack");
const fs = require("fs");

var inputFile = process.argv[2];

const compiler = webpack({
  mode : "production",
  entry : inputFile,
  output : {
    filename : "tmp.js",
  },
  optimization : {
      minimize : true,
  }
});

compiler.run((err,stats) => {
    var next = fs.readFileSync("./dist/tmp.js");
    console.log(next.toString());
});

<in.js>

function test(){
  const te = 34;
  console.log(te);
}

コマンドプロンプトで

node test.js ./src/js/in.js
```のように実行したところ、

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

というような圧縮どころかむしろ長くなったコードが出力される上、置き換えられないはずの34という値すらも消えているのですがこれはどういうことなのでしょうか。正直全くわからないのでご指摘いただければありがたいです。

よろしくお願いいたします。

Comments

[m.ts10806]

コードブロックはマークダウンのcode機能を利用してください。質問本文の要件との境目がわかりづらくなりますし、正しく再現確認ができません。

[m.ts10806]

また、プラグインやライブラリはなるべく公式サイトのURLを質問に載せるようにしてください。バージョンなど差異があると的確なアドバイスが得られなくなります（質問者さんが必ず最新を使っているとは限らないので）

[maisumakun]

Webpackのバージョンはいくつですか？

[daoneko23]

mts10806さん　ご指摘ありがとうございます。修正を加えました。以後バージョン等の記載には注意します。

[daoneko23]

maisumakunさん　4.20.1です。

Answer 1

uglifyjs-webpack-pluginの設定方法はここ。
https://webpack.js.org/plugins/uglifyjs-webpack-plugin/#getting-started

んでuglifyoptionsのcompressの設定内容で、どう圧縮するか細かく設定可能です。
https://webpack.js.org/plugins/uglifyjs-webpack-plugin/#uglifyoptions

compressに設定できるオプションの一覧はたぶんここです。
https://github.com/mishoo/UglifyJS2#compress-options

Comments

[daoneko23]

詳細なご回答ありがとうございます！試してみます。