重い腰をあげて vue init pwa で作ったサービスをwebpack4にアップデートした件

戦略

• まず主要packageを一括で更新して、buildエラーを見ながら修正していく

パッケージ更新

• package.jsonのwebpack系とbabel系を@latestで一気に更新
• 下記は見やすいよう複数に分けてますが、実際はワンライナーでやった

yarn add -D webpack@latest webpack-cli@latest webpack-merge@latest
yarn add -D webpack-dev-middleware@latest webpack-hot-middleware
yarn add -D html-webpack-plugin@latest mini-css-extract-plugin@latest
yarn add -D optimize-css-assets-webpack-plugin@latest
yarn add -D @babel/core@latest @babel/preset-env@latest

TL;DR;

• 下記のような設定になった

• webpack.prod.conf.js

  • https://gist.github.com/yazashin/ff857943a48bba04bc0d13e09594af9a

• webpack.dev.conf.js

  • https://gist.github.com/yazashin/1bd3393702fd2bdad2a22f438f27721f

• utils.js

  • https://gist.github.com/yazashin/1196f4130ba64e9f96c1211dcfacd690
  • 私は下記のMiniCssExtractPluginの設定が最初わからず30分近くハマってた..

build/utils.js

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
  return ['vue-style-loader', MiniCssExtractPlugin.loader].concat(loaders);
} else {
  return ['vue-style-loader'].concat(loaders)
}

以降は興味がある人向け

buildしてエラー見ながら潰した際のメモ

• yarn buildしてエラーが沢山でてきたので、地道に対応する

webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

• mode 'producetion'を設定する
• webpack.prod.conf.jsから、UglifyJsPluginに係る項目を消す

webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks

• 既存のCommonsChunkに関する記述を消す
• 下記を変わりに記述する

    optimization: {
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /node_modules/,
            name: 'vendor',
            chunks: 'initial',
            enforce: true
          }
        }
      }
    },

Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

• extract-text-webpack-pluginパッケージを最新化するとこのエラーは消えるが、別なエラーがでる。
• mini-css-extract-pluginを使うと解消される(後述)
• 使わないので削除しておく

yarn remove extract-text-webpack-plugin

Error: Plugin/Preset files are not allowed to export objects, only functions. In /node_modules/babel-preset-stage-2/lib/index.js

• babel-*関連を、一律アップデートした
• 一例として

yarn add -D @babel/core@latest @babel/preset-env@latest

Please remove the `import 'babel-polyfill'` call or use `useBuiltIns: 'entry'` instead.

• 素直に設定変更する

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["last 2 versions", "IE >= 11"]
        },
        "useBuiltIns": "entry",
        "corejs": 3
      }
    ]
  ]
}

Path variable [contenthash] not implemented in this context: static/css/[name].[contenthash].css

• don't use ETWP plugin for extract CSS for webpack@4. Use https://github.com/webpack-contrib/mini-css-extract-plugin for extract css.

// extract css into its own file
new MiniCssExtractPlugin({
  filename: utils.assetsPath('css/[name].[contenthash].css')
}),

大変参考になったページ

• 作業終盤に見つけた。もっと早く見つければよかった..
• https://uuka.hatenablog.com/entry/2018/09/30/015713