Не удается найти bundle.js

Question

Я знаю, что этот вопрос задан раньше, но я честно не могу найти ответ нигде - кажется, что я делаю все, что мне нужно, но связка не создается. Таким образом, у меня есть файл webpack.config.js, который должен обрабатывать HMR + React и машинопись (с синтаксисом 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

Это потому, что WebPack-DEV-сервер обслуживает bundle.js из памяти. Это делается для быстрого выполнения обслуживания bundle.js. Вы можете добавить еще WebPack конфигурации для производства, выплевывает bundle.js на диск

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

и все другие модули, просто не включают в свой Dev-сервер

, если вы хотите получать bundle.js как локальный: 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: Если вы хотите получать bundle.js

вы должны использовать то, что определено в publicPath: '/ public /'. так что для вас URL-адрес вы можете получить bundle.js из этого localhost: 3000/public/bundle.js

Answer 2

Я думаю, вы должны изменить свой выход к следующему:

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