More than 1 year has passed since last update.

webpack-dev-server起動時のエラーと解決法

Last updated at 2023-10-04Posted at 2023-10-04

ファイル構成

package.json

{
  "license": "MIT",
  "scripts": {
    "build": "webpack",
    "start": "webpack serve"
  },
  "dependencies": {
    "webpack": "5.22.0"
  },
  "devDependencies": {
    "webpack-cli": "4.9.0",
    "webpack-dev-server": "^4.15.1"
  }
}

webpack.config.js

const path = require('path');

module.exports = {
  mode: "development",
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
  }
};

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    ...
  </head>
  <body>
    ...
    <script src="./bundle.js"></script>
  </body>
</html>

今回重要なのは上の3つのファイル構成なのでそれ以外は割愛します。

概要

webpack-dev-serverを起動しようとしたところエラーが発生したので、調べながらなんとか解決して無事に起動出来ました。

解決までの行程

まずは上記のようなファイルを構成したあとにターミナルで下記コマンドを実行しました。

$ yarn start （yarn webpack serve）

すると下記のようなエラーが出ました。

$ yarn start
yarn run v1.22.19
$ webpack serve
[webpack-cli] TypeError: cli.isMultipleCompiler is not a function
    at Command.<anonymous> (~/17/node_modules/@webpack-cli/serve/lib/index.js:146:35)
    at async Promise.all (index 1)
    at async Command.<anonymous> (~/17/node_modules/webpack-cli/lib/webpack-cli.js:1687:7)
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

上記のエラーについて調べたところ、webpack-cliを「4.10.0」にアップグレードすると直るよ！ということが下記のGitHubのissuesとstack overflowのページから判明しました。

なのでアップグレードします。

$ yarn add webpack-cli@4.10.0

そして今度は行けると思いまた先程のコマンドを実行しました。
そうしたらまた先程とは違うエラーが出ました。

$ yarn start
yarn run v1.22.19
$ webpack serve
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'contentBase'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

どうやら'contentBase'がキーみたいなので、また色々と調べました。
そうしたら「contentBase」の書き方はバージョンが変わった関係などで現在は使えずに変わりに「static」に変更になったみたいです。

というわけでwebpack.config.jsのcontentBaseの箇所を修正しました。

const path = require('path');

module.exports = {
  mode: "development",
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    static:{
      directory: path.resolve(__dirname, 'dist'),
    } 
  }
};

ちなみにこの時点でのwebpackのバージョン

node_modules/.bin/webpack --version
webpack: 5.22.0
webpack-cli: 4.10.0
webpack-dev-server 4.15.1

そして今度こそはと思い再度コマンドを実行

$ yarn start
yarn run v1.22.19
$ webpack serve
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.0.0:8080/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8080/

~~　省略　~~　

webpack 5.22.0 compiled successfully in 69 ms

無事にwebpack-dev-serverが起動出来ました！
ここまでお読み頂きありがとうございました！

参考サイト

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up