備忘録

備忘録

Laravel MixのJavaScriptを難読化する方法

Ⅰ. はじめに

タイトルの通り「Laravel MixのJavaScriptを難読化する方法」です。
javascript-obfuscator の webpackプラグインである webpack-obfuscator を利用した方法をこの記事で紹介します。

Ⅱ. やり方

1. webpack.mix.js を編集する
let mix = require('laravel-mix')

// 以下を追加
let JavaScriptObfuscator = require('webpack-obfuscator')

let config = {}

if (mix.inProduction()) {
  config.plugins = [
    new JavaScriptObfuscator({
      rotateUnicodeArray: true,
    })
  ]
}

mix.webpackConfig(config)
// ここまで

mix.js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css').version()
2. ビルドする
npm run production

実行結果

f:id:kagasu:20181206012852p:plain

Ⅲ. やり方2(uglify を無効にして難読化する方法)

webpack.mix.js

if (mix.inProduction()) {
  mix.options({
    uglify: false
  })

  config.plugins = [
    new JavaScriptObfuscator({
      rotateUnicodeArray: true,
      compact: true,
    })
  ]
}