webpack-dev-serverでGET /できません

どうして私のブラウザにCannot GET /が届いていますか？私のwebpack-dev-serverには、バンドルされたファイルを入手するルートがないためだと思います。成功したビルドでwebpack-dev-serverでGET /できません

devServer/server.js

import config from '../../webpack.config'; 
import webpack from 'webpack'; 
import WebpackDevServer from 'webpack-dev-server'; 
import open from 'open'; 

// template! https://github.com/webpack/webpack-dev-server/blob/master/examples/node-api-simple/server.js 

const compiler = webpack(config); 
const server = new WebpackDevServer(compiler, { 
    contentBase: '../dist/', 
    stats: { 
    colors: true 
    } 
}); 

server.listen(3000, '127.0.0.1' ,err => { 
    if (err) { 
    console.log(err); 
    } else { 
    console.log('Dev Server listening on port 3000!\n'); 
    open("http://localhost:3000"); 
    } 
});

webpack.config.js

import webpack from "webpack"; 

export default { 
    entry: [ 
    "./app/index" 
    ], 
    devtool: "inline-source-map", 
    output: { 
    path: __dirname + "/app/dist/", // Note: Physical files are only output by the production build task `npm run build`. 
    publicPath: "/", 
    filename: "bundle.js" 
    },  
    plugins: [  
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoEmitOnErrorsPlugin(), 
    ], 
    module: { 
    rules: [ 
     { test: /\.js$/, 
     exclude: /(node_modules)/, 
     use: { 
     loader: 'babel-loader', 
     options: { 
      presets: ['env', 'react'] 
     } 
     }} 
    ] 
    } 
};

プロジェクト構造

出典

2017-09-30 Liondancer

distが内部で作成されたフォルダappフォルダー現在はそこには存在しない。フォルダが作成されたら

あなたは直接あなたがのdevのサーバーがインデックスを探している、このパスのWebPACKにアクセスするとあなたはlocalhost:3000

を経由してあなたのページにアクセスすることができ、ファイルパス

http://localhost:3000/app/dist/yourfile

出典

2017-09-30 08:43:58 brk

うーん、ちょっと混乱しています。私の 'webpack.config.js'で、' path'が '__dirname +"/app/dist "'であれば、 'bundle.js'は'/boothie/app/dist/'に入ってはいけませんか？そして私の 'publicPath：/' 'は単に' localhost：3000/'でアクセス可能でなければなりませんか？ – Liondancer

devサーバで作業するとき、ディスク上にファイルは作成されません。すべてのファイルが作成され、メモリから提供されます。したがって、生成されたファイルにdistフォルダは存在しません。 – Daniel

を押すことで試すことができます。 htmlファイル（他のウェブサーバーと同様）。 index.htmlファイルがないため、index.htmlファイルを見つけることができません。 index.htmlファイルは、プロパティcontentBase: '../dist/',で定義した静的ディレクトリから提供されます。しかし、あなたはdistという名前のディレクトリがなく、このディレクトリにはindex.htmlがありません。

は、あなたのスクリプトが公共のパスから提供され

、それはあなたの設定で/あるので、あなたのindex.htmlでこれを参照する必要が

ソリューション：

ディレクトリdistのを作成したindex.htmlを置きます以下の内容であっファイル：

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Document</title> 
    </head> 
    <body> 
     <script src="/bundle.js"></script> 
    </body> 
    </html>

の詳細についてはこちらをお読みください。 https://webpack.github.io/docs/webpack-dev-server.html

出典

2017-09-30 11:50:43 Daniel

webpack-dev-serverでGET /できません

答えて

関連する問題