はじめに

以下の記事を参考に、DockerとWebPackを使用したプロジェクトを用意してください。
既にプロジェクトがある場合は、適時読み替えてください。

難読化

難読化とは

プログラムの動作を変えずに、コード内の変数名や構造などを、読み取りにくくなるように改変・加工することです。
難読化することで、他者にプログラムをコピーして類似サービスをリリースされたりなどの対策ができます。
ただし、難読化はあくまで読み辛くしているだけなので、100%複製できないわけではありません。

難読化しない方法

「webpack.config.js」の内容を以下のように「mode」定義を追加します。

module.exports = () => {
  return {
    mode: "development",
    ~~~~~WebPackの定義~~~~~
  }
}

難読化する方法

「webpack.config.js」の内容を以下のように「mode」定義を追加します。

module.exports = () => {
  return {
    mode: "production",
    ~~~~~WebPackの定義~~~~~
  }
}

ソースマップ

ソースマップとは

DeveloperツールのSourcesで表示されるディレクトリ構造が表示される部分です。
難読化を行なっても、ソースマップが表示されていれば、ソースコードが容易に取得できてしまいます。
本番環境でリリースを行う際には必ずソースマップも非表示にしてください。

ソースマップを表示する方法

「webpack.config.js」の内容を以下のように「devtool」定義を追加します。

module.exports = () => {
  return {
    devtool: "inline-source-map",
    ~~~~~WebPackの定義~~~~~
  }
}

ソースマップを表示しない方法