📑

webpack-dev-serverのversion4の設定について

2022/02/28に公開約2,000字

webpackでローカル開発を行う上で必須のwebpack-dev-server。
webpack-dev-serverのversion3からversion4にかけて設定方法が変わっていた部分があったので備忘録。

構成

├── src
│   └── img
│   │   └── .gitkeep
│   │
│   └── scripts
│   │   └── components
│   │   │    └── .gitkeep
│   │   └── modules
│   │   │    └── .gitkeep
│   │   └── app.ts
│   │
│   └── static
│   │   └── .gitkeep
│   │
│   └── styles
│   │   └── base
│   │   │    └── base.scss
│   │   │    └── reset.scss
│   │   └── global
│   │   │    └── functions
│   │   │    │    └── functions.scss
│   │   │    │    └── mixins.scss
│   │   │    │    └── mq.scss
│   │   │    └── setting
│   │   │         └── color.scss
│   │   │         └── font.scss
│   │   │         └── size.scss
│   │   └── project
│   │   └── style.scss
│   │
│   └── index.html
│
├── .eslintignore
├── .eslintrc.js
├── .nvmrc
├── .prettierrc.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── tsconfig.json
└── webpack.config.js

設定方法

v3の場合

webpack.config.ts
// 一部省略
    :
// ローカル開発用環境を立ち上げる
    devServer: {
        open: true,
        contentBase: path.resolve(__dirname, 'src'),
        hot: true,
        port: 3000,
    },
    :
// 一部省略

v4の場合

webpack.config.ts
// 一部省略
    :
// ローカル開発用環境を立ち上げる
    devServer: {
        static: {
            directory: path.resolve(__dirname, 'src'),
        },
	open: true,
        hot: true,
        port: 3000,
    },
    :
// 一部省略

v3で設定してしまった時のエラー内容

[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? }

参考

https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md

Discussion

ログインするとコメントできます