vue init webpack で作成したプロジェクトを webpack4 に移行する

投稿者さん、よく調べたな。

https://uuka.hatenablog.com/entry/2018/09/30/015713

以降 2021/12/08 追記

# babel7 にアップグレードする

webpack4ではbabelを7に上げる必要がある。

https://shinshin86.hateblo.jp/entry/2018/10/06/223753

babel7へのアップグレードは「しちめんどくさい」らしいので、upgrade tool を使うのが良いみたい。[babel7 の公式ページ](https://babeljs.io/docs/en/v7-migration)は何を言いたいのかわかりません。


https://github.com/babel/babel-upgrade#usage

※github - babel/babel-upgrade v0.0.9@latest の Readme を抜粋

```bash
# npx lets you run babel-upgrade without installing it locally
npx babel-upgrade --write

# or install globally and run
npm install babel-upgrade -g
babel-upgrade --write
```

* ローカルインストールしなくても `npx babel-upgrade` で使える。
* オプション無しだと`package.json`の変更差分のみ出力
* オプション`--write` or `-w` は、差分を出力しつつ`package.json`も変更
* オプション`--install` or `-i`は、npm install を実行する様子
* 私は`npx babel-upgrade --write --install`でやりました。

## ビルドできるかチェック１

```bash
npm run build --report

・・・ 中略 ・・・

Module not found: Error: Can't resolve '@babel/runtime-corejs2/core-js/promise'
```

## パッケージ [@babel/runtime-corejs2](https://babeljs.io/docs/en/babel-runtime-corejs2) が無いって。

インストール

```bash
npm install --save-dev @babel/runtime-corejs2
```

## ビルドできるかチェック２
```bash
npm run build --report

・・・ 中略 ・・・

ERROR in static/js/0.278081c9a7fb6ab2d58b.js from UglifyJs
`warnings` is not a supported option
```

## `uglifyjs-webpack-plugin`のオプション指定に間違いがあるみたい。

babel upgrade tool も万能ではなかったか。。。

https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/400

https://github.com/mishoo/UglifyJS/issues/3394

以下の様に`webpack.prod.conf.js`を変更する（`compress`を削って`warnings`にする。何て言えばいいのか。）

```javascript:build/webpack.prod.conf.js
optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          //compress:{
          // warnings: false
          //}
          //@see https://github.com/mishoo/UglifyJS/issues/3394
          warnings: false
        },
        sourceMap: config.build.productionSourceMap,
        parallel: true
      })
   ]
}
```

## ビルドできるかチェック３

```bash
npm run build --report

・・・ 中略 ・・・

Error: "dependency" is not a valid chunk sort mode
```

## `html-webpack-plugin` の仕様変更らしい。

https://github.com/jantimon/html-webpack-plugin/issues/1055

https://github.com/jantimon/html-webpack-plugin#options

以下の様に`webpack.prod.conf.js`にある`HtmlWebpackPlugin`のオプション`chunksSortMode`を`dependency`以外に書き換える

```javascript:build/webpack.prod.conf.js
  plugins: [

    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      //chunksSortMode: 'dependency'
      chunksSortMode: 'auto'
    }),

  ]
```

## ビルドできるかチェックする
```bash
npm run build --report

  Build complete.
```

できた。いえーい。

karma が動かない（泣）