82197


[Preactの始め方&Reactとの違い -
Qiita](https://qiita.com/akashixi/items/e0e42e10ba8e088bf996)

を参考に構築を行いました。

> これでwebpackのdevServerを立ち上げれば、Hello World!が表示されるはずです。

とありますが、どうやって立ち上げるのでしょうか？

[webpack-dev-serverの基本的な使い方と設定方法の詳しい解説](https://original-game.com/how-to-use-
webpack-dev-server/)

をみて、package.json に

`"start": "webpack-dev-server",`

を足して実行してみました。

[code]

    % 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? }
    
[/code]

エラーのようです。

設定、および、ファイルは参考資料のように作ったはずですが、ミスがないとは言い切れません。  
本質問に必要そうなファイルをすべて載せると量が多そうですし、リンク先とほぼ同じ内容になってしまうと思います。  
このエラーの原因になりそうなファイルの検討がつかないので、もし本質問に必要なファイルがあれば、コメントで知らせていただければ追記します。

（このエラーは立ち上げの正しい手順により出たものなのか、そもそも立ち上げ方法自体が間違っているのかさえわかっていません）

（そもそも`webpackのdevServer`とはなんでしょうか、おそらく上記手順によって生成されたpackage.json内にある `"webpack-
dev-server": "^4.1.0"` のことを指しているのではないかと推測しています）

[回答](https://ja.stackoverflow.com/a/82197/9008)を受けての追記：

webpack.config.js を下記のようにして実行したところ、立ち上がりはしたのですが、ブラウザーでアクセスするとエラーでした。

[code]

    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"),
          }
        }
      }
    }
    
[/code]

実行：

[code]

    $ 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
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/Mw9at.png)](https://i.stack.imgur.com/Mw9at.png)

エラーの原因を探そうとしたのですが、  
ターミナルに特にアクセスログ的なものが追記される気配はありませんでした。

Chromeのデベロッパーツールには下記がありました

[code]

    Failed to load resource: the server responded with a status of 404 (Not Found)
    
[/code]


CC BY-SA 4.0
2021-09-02T15:07:31.527
82189
2021-09-03T22:28:11.870
2021-09-03T04:20:46.343
9008
9008
question
javascript node.js npm webpack
webpackのdevServer はどうやって立ち上げるのでしょうか？


`webpack-dev-server`ですが、7月にリリースされたv4より設定のスキーマが変更されているようです。

[マイグレーションガイド](https://github.com/webpack/webpack-dev-
server/blob/master/migration-v4.md)の[このあたり](https://github.com/webpack/webpack-
dev-
server/blob/master/migration-v4.md#:%7E:text=contentBase/contentBasePublicPath/serveIndex/watchContentBase/watchOptions/staticOptions%20options%20were%20moved%20to%20static%20option%3A)がエラーの該当箇所ですね。

[code]

    --- webpack.config.js.orig
    +++ webpack.config.js
    @@ -23,8 +23,9 @@
         devServer: {
    -      contentBase: path.join(__dirname, "./dist"),
    -      watchContentBase: true,
    +      static: {
    +        directory: path.resolve(__dirname, "./dist"),
    +      }
    
         }
       }
     }
    
    
[/code]

といったところでしょうか？

なお、起動方法ですが、[公式では](https://github.com/webpack/webpack-dev-server#with-the-
cli)(当該記事でも同時にインストールしているwebpack-cliを使用して) `webpack serve`で起動するのが推奨ではあるようです。

* * *

### 追記内容について

完全に推測の域なのですが、参考記事内にある`dist/index.html`を用意していなかったり(別の場所においていたり)しませんか？存在しなければ当然エラーになります。サーブするもの(HTML)がないので。(もっとも今時SPA文脈とかではHTMLもhtml-
loaderなどを介在して生成するのが主流なので&dist下に非生成コンテンツをおきたくはないので実運用ではみなおしたほうがよさそうな点ですが)

また、webpackのmodeを指定していないのでWARNINGがでていますしおそらく上記を修正してもブラウザに同WARNが表示されるかと思います。

[code]

    npx webpack serve --mode development
    
[/code]

のように起動してください!


CC BY-SA 4.0
2021-09-03T02:52:49.697
82197
2021-09-03T22:28:11.870
2021-09-03T22:28:11.870
9008
2376
82189
answer