📑
webpack-dev-serverのversion4の設定について
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,
},
:
// 一部省略
v３で設定してしまった時のエラー内容
[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? }
参考
Discussion