configuration - webpack-dev-server 404 & 正しく設定するには?

Question

どこから来たの

私はかなり長い間 webpack を使用してきましたが、スターター キットを変更せずにすべてをゼロからセットアップしようとするのはこれが初めてです。

私は、survivorjs.com のこの素晴らしい記事をたどり、そこで説明されているいくつかのアプローチを継承して、以前のセットアップのいくつかと組み合わせました (送信されたプロダクション変数に応じて異なる名前とパスを設定するなど)。

講義中は、追跡できない予期しない動作に巻き込まれないように、できるだけ「ビルド」と「開始」を実行するようにしました。これはうまくいきました。

その後、サードパーティのフレームワークから未使用の css を除外する 方法についての章をいじっているうちに、どういうわけか開発サーバーのセットアップを壊してしまいました。("run build"まだ動作します!)

問題

私のホット サーバーは 192.168.1.2:3000 で定義されています (これが私の望みです)。webpack-dev-server以下に示す設定で実行すると、その場所で404 ( Cannot GET / ) が返されます。今、私はwebpack devサーバーを正しくセットアップする方法について多くのことを読みましたが、まだ正しく理解できていません...(ほとんどの場合、ここだけではありません...)パスが機能します。

これは私の理解です（一般的な開発サーバーのセットアップ）：

（これについて間違っている場合は助けてください）

• 私の出力パスは、開発webpack.config.jsサーバーの実行中にメモリ内でのみ提供されるため、物理的には表示されません (出力がpath: path.join(__dirname, 'devServerFolder'たとえば、私が作成していない場合、プロジェクト構造のどこにもそのフォルダーが表示されない場合) )
• index.htmlmy を指す静的なフォルダーには、 withとbundle.jswith を指すフォルダーが必要です(これは、その中に作成する必要がある my である可能性があります。通常、Web 上のほとんどのセットアップでは、保存に使用される同じフォルダーが使用されます)。生産ビルドイン)publicPathcontentBasedevServerFolderindex.htmlpublic
• プラグインを使用html-webpack-pluginすると、bundle.jsがプラグインによって書き込まれるため、何かを指す必要なく自動的にそのファイルが生成されます

これらは、よく理解するのに本当に苦労している点の一部です。私はたくさん試しました。の。異なる。私の開発サーバーを再確立するために運がなければ、との設定で遊んでいる組み合わせ（最初はうまくいきました）。 コードや でビルドをコンパイルすることに問題はありません。publicPathcontentBaserun build

設定

フォルダ構造

webpack.test
|
| - app                    // App folder
     |
     | - index.js          // Entry point
     | - greet.js          // Hello World called by index.js
     | - sass              // Sass assets folder
     | - pug               // Pug (formerly jade) template and assets folder
| - node_modules
| - public                 // Production output folder
| - webpack-config-chunks  // Split up webpack configs folder
| - .babelrc 
| - package.json
| - webpack.config.js

Webpack.config.js

// Irrelevant parts omitted

const paths: {
  app:   path.join(__dirname, 'app'),    // The obvious one
  dev:   path.join(__dirname, 'bin'),
  /* As mentioned above, from my understanding,
     the output path for the dev server doesn't really matter at all
     when using html-webpack-plugin, am I wrong here? */
  build: path.join(__dirname, 'public')  // Another obvious one
  ...
};

...
entry: {
  app: production ? paths.app : [
    'webpack-dev-server/client?192.168.1.2:3000',
    'webpack/hot/only-dev-server',
     paths.app
  ]
  /* I can modify the entry to just be paths.app for every case
     but it won't change a thing regarding my problem. */
},

output: {
  path: production ? paths.build : paths.dev,
  publicPath: production ? '' : paths.dev + '/',
  /* ^ This is where I've tried just '' or paths.app or paths.build
       instead of paths.dev and delete publicPath all together. */
  filename: production ? '[name].[chunkhash].js' : '[name].js',
  chunkFilename: '[chunkhash].js'
},

devServer: {
  contentBase: paths.dev,
  /* ^ This = "webpack.test/bin" – See above.
       Tried several different paths here as well without luck. */
  hot: true,
  inline: true,
  stats: 'minimal',
  compress: true,
  host: '192.168.1.2',
  port: '3000',
},

plugins: [
  new HtmlWebpackPlugin(),
  new webpack.HotModuleReplacementPlugin(){
    multiStep: true
  }
]
...