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!

Solution 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

Solution 2

I think you need to change your output to this:

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

Comments

[Jay]

Thanks David! While this is insanely awesome that it serves it from disk, the bundle file is unavailable from localhost:3000/dist/bundle.js. Do you see any reason why this would be the case from my config file? Maybe I'm just confused about what path I should request that bundle from

[Jay]

You're a beast, thanks man! This was perfect, I always forget path.join has to have the prefixing /.

[Jay]

Ahh wait, so sorry, I think I had a stale bundle in my dist folder. I think that you're right this was also a problem, but it sadly didn't fix the 404 I'm getting when requesting localhost:3000/dist/bundle.js

[David]

you are not doing anything wrong but webpack-dev-server serves bundle.js from memory, I don't think there is an option to change that, what you can do is to add another webpack.config.js file that spits out to disk, if you don't include 'webpack-dev-server/client?localhost:3000', 'webpack/hot/only-dev-server', it will output to disk

[Jay]

Thanks for explaining David! I think you misunderstood me, while yes I understand that the dev server serves bundle.js from memory, shouldn't I be able to request localhost:3000/dist/bundle.js and receive it? I get that it won't be in the dist folder, since it doesn't write to disk, but I should be able to request it, no?

[Jay]

Also, I tried removing those the two lines referencing webpack dev server and the hot reload only dev server, and it still did not write to disk when run through my node script

[David]

localhost:3000/dist/bundle.js you can't fetch bundle.js from memory like that, but see if my code, I just posted work

[Jay]

Interesting, I'll try out your code! Out of curiosity, what URL could I fetch from that would fetch bundle.js from memory?

[alex]

I also always have my entry point as an array: entry: [ './src/index.tsx' ],

[Jay]

Yup, I have mine as an array as well. Though I've done it both ways and they've both worked in the past

[Jay]

Also, your code will def work, but I think it doesn't work with hot reloading (I think?), which is key and I would really like to get that working as well

[Jay]

Oh, well okay then. So what's the point of it keeping bundle in memory if you can't fetch it?

[alex]

You are right it shouldn't matter. One other thing you might want to try is add the path to this: include: path.join(__dirname, '/src')

[Jay]

Yeah I saw that as well, didn't fix my problem :/ (though there might be multiple and this might be one of them lol)

[Jay]

Let us continue this discussion in chat.

[David]

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

[Jay]

Dude no way, I think that was the missing piece

[David]

Let us continue this discussion in chat.

[iLearn]

Which File do I need to put this output information?

[alex]

This should go in your webpack.conf.js file