webpack4に更新した時にこけた所まとめ

webpackをv3.10.0からv4.3.0に更新したら色々とこけたのでそのまとめです。

参考記事　（チュートリアル?）
https://www.valentinog.com/blog/webpack-4-tutorial/　　

webpack-cliの追加

結果　

The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D

原因
webpack4からwebpack-cliが必要になった模様

解決法
webpack-cliを追加

yarn add --dev webpack-cli

webpack.config.js修正

結果

✖ ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration[0].module has an unknown property 'loaders'. These properties are valid:
   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
   -> Options affecting the normal modules (`NormalModuleFactory`).
 - configuration[1].module has an unknown property 'loaders'. These properties are valid:
   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
   -> Options affecting the normal modules (`NormalModuleFactory`).
error An unexpected error occurred: "Command failed.

原因
webpack.config.jsの書き方変わった（？）

解決法
webpack.config.jsのlodersをrulesに変更

webpack.config.js

module: {
      rules: [{
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015'],
        },
      }],
    },

option --modeの追加

結果

WARNING in configuration
    The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment. 

原因
productionとdevelopmentを分けられるオプションのmode設定が必要

解決法
--mode development --openを追加

package.json

"scripts": {
  "start": "webpack-dev-server --mode development --open"
},