WebpackでUglifyJSPluginを使ってminifyしようとするとUnexpected token: name (Dom7)が出る場合の対処法

TL;DR

• Swiperを普通に読み込むとDom7が原因でエラーが出る。
• コンパイルされたes5のファイルを読み込むか、WebpackでDom7をexcludeすることで回避できる。

関連パッケージのバージョン

• @babel/core: 7.1.2
• @babel/polyfill: 7.0.0
• @babel/preset-env: 7.1.0
• babel-eslint: 10.0.1
• babel-loader: 8.0.4
• mini-css-extract-plugin: 0.4.5
• swiper: 4.5.0
• uglifyjs-webpack-plugin: 2.0.1
• webpack: 4.25.1
• webpack-cli: 3.1.

Webpack

webpack.config.js

const path = require("path"),
  webpack = require("webpack"),
  UglifyJSPlugin = require("uglifyjs-webpack-plugin")
... 
module.exports = (env, argv) => {
  const IS_DEVELOPMENT = argv.mode === "development"

  return {
    entry: ["@babel/polyfill", "./src/js/main.js"],
    output: {
      path: path.join(__dirname, "./dist/"),
      filename: "js/bundle.js"
    },
    devtool: IS_DEVELOPMENT ? "source-map" : "none",
    optimization: {
      minimizer: IS_DEVELOPMENT
        ? []
        : [
            new UglifyJSPlugin({
              uglifyOptions: {
                compress: {
                  drop_console: true
                }
              }
            })
          ]
    },
    ...
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: [
            {
              loader: "babel-loader",
              options: {
                presets: [["@babel/preset-env", { modules: false }]]
              }
            }
          ]
        }
      ]
    }
    ...
  }
}

エラー内容

ERROR in js/bundle.js from UglifyJs
Unexpected token: name (Dom7) [js/bundle.js:10622,6]

解決策

UMD版のみ読み込む

SwiperはES6を使用しているため、コンパイルされたES5のUMD版を使用すれば問題ないようで、読み込み方を変えれば問題なくビルドされる。
ただしこの方法だと当然Tree Shakingが使えない。

import Swiper from "swiper/dist/js/swiper.js"

WebpackでDom7をexcludeする

webpack.config.js

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules\/(?!(dom7|swiper)\/).*/,
      use: [
        {
          loader: "babel-loader",
          options: {
            presets: [["@babel/preset-env", { modules: false }]]
          }
        }
      ]
    }
  ]
}

import Swiper from "swiper"

Tree Shakingを使いたい場合

swiper/dist/js/swiper.esm.jsから使いたいものだけimportすれば良い。

Swiper API#Custom Build

import { Swiper, Navigation, Pagination, Scrollbar } from 'swiper/dist/js/swiper.esm.js'

おまけ

• Tree Shaking適用前: 495 KB
• Tree Shaking適用後: 433 KB

参考

Webpack Production Bundling fails because of UglifyJS Error with Dom7 #2263