webpack-dev-serverとは
webpack-dev-serverはWebサーバーを起動してlocalhostのURLで確認する際に必要なものだが、現在ではwebpack-dev-serverコマンドでは以下のようなエラーが出て実行不可となっている。
$ webpack-dev-server internal/modules/cjs/loader.js:883 throw err; ^ Error: Cannot find module 'webpack-cli/bin/config-yargs' Require stack: /Users/iwbjp/dev-server-test/node_modules/webpack-dev-server/bin/webpack-dev-server.js
webpack-cli serveを使用する
結論から言うとwebpack(4系)ではWebサーバーを起動してlocalhostのURLで確認する際はwebpack-dev-serverではなくwebpack-cli serveを使用する。
webpack-cli serve --open --mode development
試しに必要なものをnpm installしてindex.html、index.js、webpack.config.js、tsconfig.jsonを用意してwebpack実行後にwebpack-cli serveを使用するとWebサーバーが起動してlocalhostのURLで確認できるようになる。
<html>
<h1>sample</h1>
<script src="index.js"></script>
</html>
function add(a: number, b: number): void {
console.log(a + b)
}
add(1, 2)
const path = require('path')
module.exports = () => {
return {
mode: 'production',
entry: {
index: path.join(__dirname, 'index.ts')
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'index.js'
},
module: {
rules: [
{
use: [{ loader: 'ts-loader' }],
test: /\.ts$/
}
]
}
}
}
{
"compilerOptions": {
"target": "ES5"
},
"files": [
"index.ts"
]
}
npm init -y npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader webpack webpack-cli serve --open --mode development
