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

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

以降 2021/12/08 追記

babel7 にアップグレードする

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

babel7へのアップグレードは「しちめんどくさい」らしいので、upgrade tool を使うのが良いみたい。babel7 の公式ページは何を言いたいのかわかりません。

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

# 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でやりました。

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

npm run build --report

・・・ 中略 ・・・

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

パッケージ @babel/runtime-corejs2 が無いって。

インストール

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

ビルドできるかチェック２

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 も万能ではなかったか。。。

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

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
      })
   ]
}

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

npm run build --report

・・・ 中略 ・・・

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

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

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

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'
    }),

  ]

ビルドできるかチェックする

npm run build --report

  Build complete.

できた。いえーい。

karma が動かない（泣）