webpack1からwebpack5に上げた

端書き
[対応したときのPR](https://github.com/wilf312/vuejs-vuex-todo-demo/pull/4)


## 1. loaders, preLoaders を rulesに変更
loaders を rulesに置き換え
preLoaders を削除して、設定に enforce: 'pre' を追加

## 2. webpack configに追加されている invalidなオプションを除外

```
  eslint: {
    formatter: require('eslint-friendly-formatter')
  },
  vue: {
    loaders: utils.cssLoaders()
  }
```

## 3. hot moduleの呼び出し方修正

```
app.use(
  require('webpack-dev-middleware')(compiler, {
    publicPath: webpackConfig.output.publicPath
  })
);

app.use(require("webpack-hot-middleware")(compiler));

```

https://github.com/wilf312/vuejs-vuex-todo-demo/pull/4/commits/ed002b67379c157640fe418211cab96e08a394e0


## 4. webpack-mergeのexports内容変更
```
var merge = require('webpack-merge')
↓
const { merge } = require('webpack-merge')
```

## 5. loader option を query → options に変更
```
* configuration.module.rules[7] has an unknown property 'query'. These properties are valid:
      object { compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }

```

## 6. extensions の empty-string を削除
configuration.resolve.extensions[0] should be an non-empty string.

https://twitter.com/wilf_genya/status/1325677326114332672

## 7. configuration.resolve.fallback[0] should be an object
もしくは configuration.resolveLoader has an unknown property 'root'

https://webpack.js.org/migrate/3/#loaders-in-configuration-resolve-relative-to-context

```
resolve: {
  fallback: [path.join(__dirname, '../node_modules')
}
↓
resolve: {
  modules: [
    path.join(__dirname, '../node_modules')
  ],
}
```

## 8. Dev Middleware has been initialized using an options

statsの削除

https://github.com/webpack/webpack-dev-middleware

```
ValidationError: Invalid options object. Dev Middleware has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'stats'. These properties are valid:
```

## 9. Dev Middleware TypeError: compiler.plugin is not a function

コメントアウト

```
/Users/okada.g/Documents/GitHub/vuejs-vuex-todo-demo/build/dev-server.js:29
compiler.plugin('compilation', function (compilation) {
         ^

TypeError: compiler.plugin is not a function
    at Object.<anonymous> (/Users/okada.g/Documents/GitHub/vuejs-vuex-todo-demo/build/dev-server.js:29:10)
    at Module._compile (internal/modules/cjs/loader.js:1251:30)
```


## 10. Error: Compiling RuleSet failed: Exclamation mark separated loader lists has been removed in favor of the 'use' property with arrays

```
Error: Compiling RuleSet failed: Exclamation mark separated loader lists has been removed in favor of the 'use' property with arrays (at ruleSet[1].rules[8].loader: vue-style-loader!css-loader)
```

## 11. <e> The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

mode: 'development' もしくは 'production' を追加

## 12. Error: Plugin/Preset files are not allowed to export objects, only functions. In
.babelrc


```
  "presets": ["es2015", "stage-2"],
↓
  "presets": [["@vue/cli-plugin-babel/preset", { "useBuiltIns": "usage" }]],
```


## 13. <e> TypeError: Cannot read property 'parseComponent' of undefined
https://github.com/vuejs/component-compiler-utils/issues/82

yarn add -D vue-template-compiler


## 14. Module parse failed: Unexpected token (2:0) <e> File was processed with these loaders: <e> * ./node_modules/vue-loader/lib/index.js <e> * ./node_modules/eslint-loader/dist/cjs.js <e> You may need an additional loader to handle the result of these loaders.

https://github.com/vuejs/vue-cli/issues/1419


> yarn upgrade --depth=9999 vue-loader

## 15. You may need an additional loader to handle the result of these loaders.

```
ERROR in ./src/components/Todo.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/Todo.vue?vue&type=style&index=0&lang=css&) 24:0
Module parse failed: Unexpected token (24:0)
File was processed with these loaders:
* ./node_modules/vue-loader/lib/index.js

```

css追加

```
{
  test: /\.css$/,
  use: [
    'vue-style-loader',
    'css-loader'
  ]
},
```

ここでサーバーが立ち上がるところまで行った


## 16. [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

https://github.com/vuejs/vue-cli/issues/2754#issuecomment-493290698

webpack.config.js
resolve: { alias: { vue: 'vue/dist/vue.esm.js' } }

App.vue
new Vue({ el: '#app', router, render: h => h(App) })

```
const VueLoaderPlugin = require('vue-loader/lib/plugin')

  plugins: [
    // https://vue-loader.vuejs.org/guide/#manual-setup
    new VueLoaderPlugin()
  ]
```


## 17. [Vue warn]: Property or method "todoList" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

mapGetters, mapActions, mapStateに差し替え


## 18. TypeError: webpack.optimize.OccurenceOrderPlugin is not a constructor
new webpack.optimize.OccurenceOrderPlugin を削除

## 19. TypeError: webpack.optimize.CommonsChunkPlugin is not a constructor

new webpack.optimize.CommonsChunkPlugin を削除


## 20. TypeError: compiler.plugin is not a function
    at ExtractTextPlugin.apply (/Users/repo/node_modules/extract-text-webpack-plugin/dist/index.js:147:16)


yarn add -D mini-css-extract-plugin
yarn remove extract-text-webpack-plugin