Can't find bundle.js

Question

I know this question has been asked before, but I honestly can't find the answer anywhere-- it appears as if I'm doing everything I should however bundle is not created. So I have this webpack.config.js file that's supposed to handle HMR + React, and typescript (with tsx syntax), but it's not creating the bundle. Throws no errors on compilation, and seems to be doing alright, but the bundle returns a 404 when I try to fetch it. Here's my file structure:

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

And here's my webpack config:

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

Another strange thing is that I think it might have something to do with executing this through node, since when I just run webpack by itself it compiles the bundle. Here's my code for starting up the server:

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

})

Maybe I'm missing something, but I'm pretty new to webpack so any help would be amazing!

Answer 1

Thats because webpack-dev-server is serving bundle.js from memory. This is done to make serving bundle.js fast. You can add another webpack config for production that spits out bundle.js to disk

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

and all your other modules, just don't include your dev-server

if you want to fetch bundle.js like localhost:3000//..../bundle.js

try this

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: If you want to fetch bundle.js

you have to use what is defined in the publicPath: '/public/'. so for you the url you can fetch bundle.js from is this localhost:3000/public/bundle.js