を参考に構築を行いました。
これでwebpackのdevServerを立ち上げれば、Hello World!が表示されるはずです。
とありますが、どうやって立ち上げるのでしょうか?
webpack-dev-serverの基本的な使い方と設定方法の詳しい解説
をみて、package.json に
"start": "webpack-dev-server",
を足して実行してみました。
% npm run start
> www@1.0.0 start
> webpack-dev-server
[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 'watchContentBase'. 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?, setupExitSignals?, static?, watchFiles?, webSocketServer? }
エラーのようです。
設定、および、ファイルは参考資料のように作ったはずですが、ミスがないとは言い切れません。
本質問に必要そうなファイルをすべて載せると量が多そうですし、リンク先とほぼ同じ内容になってしまうと思います。
このエラーの原因になりそうなファイルの検討がつかないので、もし本質問に必要なファイルがあれば、コメントで知らせていただければ追記します。
(このエラーは立ち上げの正しい手順により出たものなのか、そもそも立ち上げ方法自体が間違っているのかさえわかっていません)
(そもそもwebpackのdevServer
とはなんでしょうか、おそらく上記手順によって生成されたpackage.json内にある "webpack-dev-server": "^4.1.0"
のことを指しているのではないかと推測しています)
回答を受けての追記:
webpack.config.js を下記のようにして実行したところ、立ち上がりはしたのですが、ブラウザーでアクセスするとエラーでした。
const path = require("path");
const webpack = require("webpack");
module.exports = env => {
return {
entry: "./src/index.jsx",
output: {
filename: "./js/bundle.js"
},
resolve: {
extensions: [".js", ".jsx"]
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"]
}
]
},
devServer: {
static: {
directory: path.resolve(__dirname, "./dist"),
}
}
}
}
実行:
$ npx 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://ローカルIPアドレス:8080/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/src/pr/www/dist' directory
asset ./js/bundle.js 134 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 27.1 KiB 13 modules
orphan modules 23.9 KiB [orphan] 8 modules
cacheable modules 207 KiB
modules by path ./node_modules/webpack-dev-server/client/ 51 KiB
modules by path ./node_modules/webpack-dev-server/client/modules/ 30.2 KiB 2 modules
3 modules
modules by path ./node_modules/webpack/hot/*.js 4.3 KiB 4 modules
modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB 4 modules
modules by path ./node_modules/url/ 37.4 KiB 3 modules
modules by path ./node_modules/querystring/*.js 4.51 KiB 3 modules
./src/index.jsx + 1 modules 9.94 KiB [built] [code generated]
./node_modules/ansi-html/index.js 4.16 KiB [built] [code generated]
./node_modules/events/events.js 14.5 KiB [built] [code generated]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
webpack 5.51.2 compiled with 1 warning in 992 ms
エラーの原因を探そうとしたのですが、
ターミナルに特にアクセスログ的なものが追記される気配はありませんでした。
Chromeのデベロッパーツールには下記がありました
Failed to load resource: the server responded with a status of 404 (Not Found)