のWebPACK-devのサーバーは

Question

を「/取得することはできません」私は、次のWebPACKの設定があります。

module.exports = { 
    entry: "./src/index.js", 
    output: { 
    path: __dirname + '/dist', 
    // publicPath: __dirname + '/dist/', 
    filename: "bundle.js" 
    }, 
    devServer: { 
    contentBase: "/dist", 
    hot: true, 
    } 
} 

を私の理解では、contentBaseはどこからファイルを提供するためにWebPACKのdevのサーバーを伝えることです。したがって、localhost:8080/test.txtに行くと、この設定では、myProjectRoot/dist/test/txtのファイルがサーバーからブラウザに送信されます。あれは正しいですか？ output.publicPathはそれに何が関係していますか？

今私はindex.htmlとbundle.jsが今はmyProjectRoot/dist/に座っています。 （しかし、私はbundle.jsは実際にはwebpack-dev-serverによって返されたメモリバンドルだが、やはり混乱しているので混乱していると思う）。以前の段落を前提にすると、サーバーはindex.htmlをブラウザに返すと期待しています。 contentBaseは/distで、index.htmlのディスク上のパスは./dist/index.htmlです。

しかし、その代わりに、私は次を参照してください。私はhttp://localhost:8080/bundle.jsに行けばCannot GET /

だからもう一度、私は（最後の私のテキストエディタで保存されたもので最新の状態に）完全なJavaScriptのバンドルを参照してください。しかし、その後/index.htmlはCannot GET /と勝ちますか？

私には何が欠けていますか？

Answer 1

相対パスまたは絶対パスをdevServer.contentBaseに設定する必要があります。
webpack-dev-serverプロジェクトをルートディレクトリとして使用しないでください。/distがプロジェクトディレクトリ内のフォルダに解決されません。

これを試してみてください：

module.exports = { 
    entry: "./src/index.js", 
    output: { 
    path: __dirname + '/dist', 
    filename: "bundle.js" 
    }, 
    devServer: { 
    contentBase: __dirname + '/dist' 
    // contentBase: 'dist' 
    } 
}