webpackでminifyしたjavascriptファイルと他のjavascriptファイルとの競合は有りえますか

Question

webpackを用いてビルドしたjavascriptファイルをその環境とは全く別のサイトでscriptタグを用いて読み込みたいと考えております。

webpack --mode=productionでminify有りビルドしたファイルは当然ですが下のように変数名が極端に短縮されるなどの処理が行われます。

!function(t){var n={};function r(e){if(n[e])return n[e].exports;var o=n[e]=

このようなファイルを別のサイトで読み込む時に、例えば同じくminifyされたjsファイルを読み込んでいるとしたら競合が起きたりはしないのでしょうか。

また可能性があるとしたら、それを回避する方法はあるのでしょうか。

Answer 1

このようなファイルを別のサイトで読み込む時に、例えば同じくminifyされたjsファイルを読み込んでいるとしたら競合が起きたりはしないのでしょうか。

（あえてwindowやグローバル変数経由で値を読み書きするような処理を入れていた、あるいはevalで文字列から何かを回すようなコードを書いていたなどの場合などを除いて）基本的には発生しません。

Webpackでコンパイルしたソースコードは、全て無名関数で区切られ、変数などはローカルなものとなります。外部からの影響は受けませんし、外部に影響を与えることもありません。

Comments

[maisumakun]

もちろん、同じエレメントに複数のイベントを付けたなどをやると挙動が矛盾することは考えられますが、それはminifyの有無と無関係な話です。

[petmen029]

ありがとうございます！
無名関数とは最初に出したソースの`!function(t){`の部分でしょうか。この辺り自分で調べてみます。
エレメントも確かに、html側で用意されたものに対しての操作をする場合はminifyによらず考慮が必要な点ですね。ありがとうございます。