bundle.jsを見つけることができません

Question

私はこの質問が以前に尋ねられたことは知っていますが、正直なところ答えは見つけられません。だから私はこのwebpack.config.js HMR + Reactとtypescript（tsx構文）を扱うはずのファイルを持っていますが、バンドルを作成していません。コンパイル時にエラーは発生しません。問題はないようですが、フェッチしようとすると、バンドルは404を返します。ここに私のファイル構造です：

someApp/ 
    src/ 
    index.tsx 
    components/ 
     Hello.tsx 
    dist/ 
    webpack.config.js 
    ... 

そして、ここに私のWebPACKの設定です：

var path = require('path') 
var webpack = require('webpack') 

module.exports = { 
    entry: [ 
     'webpack-dev-server/client?http://localhost:3000', 
     'webpack/hot/only-dev-server', 
     './src/index.tsx' 
    ], 
    output: { 
     path: path.join(__dirname, '/dist'), 
     filename: 'bundle.js', 
     publicPath: '/public/' 
    }, 

    plugins: [ 
     new webpack.HotModuleReplacementPlugin() 
    ], 

    devtool: 'eval', 

    resolve: { 
     extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js'] 
    }, 

    module: { 
     loaders: [ 
      { 
       test: /\.tsx?$/, 
       loaders: [ 
      'react-hot-loader', 
      'ts-loader' 
     ], 
     include: path.join(__dirname, '/src') 
      } 
     ], 

     preLoaders: [ 
      { test: /\.js$/, loader: 'source-map-loader' } 
     ] 
    }, 
    externals: { 
     'react': 'React', 
     'react-dom': 'ReactDOM' 
    }, 
}; 

別の奇妙なことは、私はそれが私がちょうどwebpackを実行したとき以来、ノードを介してこれを実行するとは何かを持っているかもしれないと思うということですそれ自身でバンドルをコンパイルします。ここでは、サーバを起動するための私のコードは次のとおりですので、任意のヘルプは素晴らしいだろう

var webpack = require('webpack'); 
var WebpackDevServer = require('webpack-dev-server'); 
var config = require('./webpack.config'); 

new WebpackDevServer(webpack(config), { 
    publicPath: config.output.publicPath, 
    hot: true, 
    historyApiFallback: true 
}).listen(3000, 'localhost', function (err, result) { 
    if (err) { 
    return console.log(err) 
    } 

    console.log('Listening at http://localhost:3000/') 

}) 

は、たぶん私は何かが足りないんだけど、私はWebPACKのにかなり新たなんです！

Answer 1

厥。これはbundle.jsの処理を高速化するために行われます。あなたはbundle.jsを取得したい場合は、ちょうどあなたのdevのサーバー

が含まれていない、ディスク

module.exports = { 
    entry: './src/index.tsx', 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: 'bundle.js', 
     publicPath: '/public/' 
    }, 
. 
. 
. 

とすべての他のモジュールにbundle.jsを吐き出す生産のために別のWebPACKのコンフィグを追加することができますlocalhostのような：3000 //..../ bundle.js

この

var path = require('path') 
var webpack = require('webpack') 

module.exports = { 
    entry:'./src/index.tsx', 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: 'bundle.js', 
     publicPath: '/public/' 
    }, 

    //plugins: [ 
     // new webpack.HotModuleReplacementPlugin() 
    //], 

    devtool: 'eval', 

    resolve: { 
     extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js'] 
    }, 

    module: { 
     loaders: [ 
      { 
       test: /\.tsx?$/, 
       loaders: [ 
      'react-hot-loader', 
      'ts-loader' 
     ], 
     include: path.join(__dirname, 'src') 
      } 
     ], 

     preLoaders: [ 
      { test: /\.js$/, loader: 'source-map-loader' } 
     ] 
    }, 
    externals: { 
     'react': 'React', 
     'react-dom': 'ReactDOM' 
    }, 
}; 

EDITを試してください：あなたは

01 bundle.js取得したい場合

あなたはpublicPath： '/ public /'で定義されているものを使用する必要があります。あなたのためにあなたはbundle.jsをfetchすることができるURLをlocalhost：3000/public/bundle.js

Answer 2

私はあなたがこれにあなたの出力を変更する必要があると思う：WebPACKの-devのサーバーをメモリからbundle.jsにサービスを提供しているので、

output: { 
    path: path.join(__dirname, '/dist'), // <- change last argument 
    filename: 'bundle.js', 
    publicPath: '/public/' 
},