bundle.js'yi bulamıyor

Question

Bu sorunun daha önce sorulmuş olduğunu biliyorum, ancak cevabı hiçbir yerde bulamıyorum - sanki yapmam gereken herşeyi yapıyormuş gibi görünüyorum. Bu yüzden, HMR + React ve tipcript (tsx sözdizimi ile) işlemesi gereken bu webpack.config.js dosyasına sahibim, ancak bu paket oluşturmuyor. Derleme konusunda hiçbir hata atar ve her şey yolunda gibi görünüyor, ancak paketi almaya çalıştığımda 404 döndürür. İşte benim dosya yapısı:

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

Ve işte benim webpack yapılandırma var:

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' 
    }, 
}; 

başka tuhaf bir şey ben sadece webpack çalıştırdığınızda beri düğüm aracılığıyla bu yürütülmesi ile ilgili bir şey olabileceğini düşünüyorum olmasıdır tek başına paketi derler. İşte benim kod sunucusunu başlatmak için var: Belki bir şey eksik ama WebPack için oldukça yeni

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/') 

}) 

böylece herhangi bir yardım şaşırtıcı olurdu!

Answer 1

Thats webpack-dev-sunucu belleğinden bundle.js hizmet çünkü. Bu, bundle.js hizmetini hızlı bir şekilde sunmak için yapılır. Sen diske

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

ve diğer tüm modülleri için bundle.js tükürür üretimi için başka webpack yapılandırması Eğer bundle.js getirmek istiyorsanız, sadece dev-sunucu

yer vermediğinizden ekleyebilir localhost gibi: 3000 //..../ bundle.js

bu

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 deneyin: Eğer

01 bundle.js getirmek istiyorsanız

publicPath: '/ public /' ile tanımlananları kullanmak zorundasınız. bu yüzden sizin için bundle.js'yi getirebileceğiniz URL bu localhost'dur: 3000/public/bundle.js

Answer 2

Bunu için çıkışını değiştirmek gerekir düşünüyorum:

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