bundle.js missing from webpack build when using webpack-dev-server

Question

I looked at similar but couldnt find a concerete answer that resolved my issue. I can't find the bundle.js file even though I am specifying where it should be outputted and everything works in the browser. I understand that the webpack-dev server is loading the files from memory and nothing is being written to disk, how I can get the file to be built and added to the dir specified in the output property in the config file?

Here is my package.json:

    {
    "name": "redux-simple-starter",
    "version": "1.0.0",
    "description": "Simple starter package for Redux with React and Babel support",
    "main": "index.js",
    "repository": "[email protected]:StephenGrider/ReduxSimpleStarter.git",
    "scripts": {
     "start": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js -- content-base build"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
      "babel-core": "^6.2.1",
      "babel-loader": "^6.2.0",
      "babel-preset-es2015": "^6.1.18",
      "babel-preset-react": "^6.1.18",
      "react-hot-loader": "^1.3.0",
     "webpack": "^1.12.9",
     "webpack-dev-server": "^1.14.0"
     },
     "dependencies": {
     "babel-preset-stage-1": "^6.1.18",
     "react": "^0.14.3",
     "react-dom": "^0.14.3",
     "react-redux": "^4.0.0",
     "redux": "^3.0.4"
    }
    }

webpack config:

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

    module.exports = {
     entry: [
       'webpack-dev-server/client?http://localhost:8080',
       'webpack/hot/only-dev-server',
       './src/index.js'
     ],
     output: {
       path: path.join(__dirname, 'assets'),
       publicPath: '/',
       filename: 'bundle.js'
     },
     module: {
       loaders: [{
         exclude: /node_modules/,
         loader: 'babel'
       }]
     },
     resolve: {
       extensions: ['', '.js', '.jsx']
     },
     devServer: {
       contentBase: './'
     },

     plugins: [
       new webpack.HotModuleReplacementPlugin()
     ]
    };

I believe I've seen this before - I don't believe when running webpak-dev-server that bundle.js is actually created, but rather just stored in memory. I suspect if you run the simple vanilla webpack command that just builds the project, you will see your bundle.js in your assets directory. Again, try running just webpack from your terminal. — lux
– lux, Commented Mar 8, 2016 at 15:36

Austin Shoecraft · Accepted Answer · 2016-03-08 14:46:10Z

5

When using the dev server, the output is placed on it. So you won't actually see it amongst your files. From your index.html file you will want to load it in from the server.

For example, for my app I load in dev server, my vendor files, and then my own code.

<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="http://localhost:8080/build/vendor.js"></script>
<script src="http://localhost:8080/build/app.js"></script>

And here is the relevant portion of my webpack config. There is some unnecessary legacy bits from when I was also loading it in from a static build bundle.

  app: [
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080',
        './client/index.js'
        ]

},
output: {
    path: __dirname + '/client/build',
    publicPath: '/build/',
    filename: '[name].js',
    pathinfo: true
},

answered Mar 8, 2016 at 14:46

Austin Shoecraft

2151 gold badge3 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Abdi Over a year ago

I know that it's loading in from the webpack server, but I would like the actual file in my directory so that I can use it in another environment, if this makes sense.

Austin Shoecraft Over a year ago

That sounds more like a design issue, rather then a webpack issue. I'd reconsider what you are trying to do in that case if you can't simply reference the build from the server.

Mr Jedi Over a year ago

@AustinShoecraft just imagine dev and prod enviroment. In prod you just wan't put inline js files but in dev you may want hot reloading. If you serve html from server you can't use webpack dev server becouse it don't change files on disk.

Alejandro Napoles · Accepted Answer · 2016-03-12 17:40:49Z

4

This Webpack plugin forces the server to write the bundle to disk.

Although I agree with Austin and lux, if you need to have the file in disk, call webpack directly.

answered Mar 12, 2016 at 17:40

Alejandro Napoles

914 bronze badges

Comments

adiga · Accepted Answer · 2019-04-09 06:55:44Z

1

Include below script in the webpack.config.js file

devServer: {
  writeToDisk: true
}

edited Apr 9, 2019 at 6:55

adiga

35.4k9 gold badges65 silver badges88 bronze badges

answered Apr 9, 2019 at 6:17

Vivek

111 silver badge2 bronze badges

Comments

Sun · Accepted Answer · 2016-12-17 15:03:56Z

0

You can also tell webpack to watch using a flag in the config. This will generate the bundle file

module.exports = {
    watch: true,
};

answered Dec 17, 2016 at 15:03

Sun

2,6986 gold badges29 silver badges33 bronze badges

Comments

solanki... · Accepted Answer · 2017-03-25 11:50:03Z

0

Replace your scripts object of package.json file with the following one:

"scripts": {
     "start": "npm run build",
     "build": "webpack -p && ./node_modules/webpack-dev-server/bin/webpack-dev-server.js -- content-base build"
},

Then, run $ npm start

answered Mar 25, 2017 at 11:50

solanki...

5,1182 gold badges29 silver badges29 bronze badges

Collectives™ on Stack Overflow

bundle.js missing from webpack build when using webpack-dev-server

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Linked

Related