CODEWITHSUNDEEP
javascriptreactjswebpackwebpack-dev-server
Abdi
Abdi

Reputation: 499

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

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()
     ]
    };

Upvotes: 7

Views: 11342

Answers (5)

Vivek
Vivek

Reputation: 11

Include below script in the webpack.config.js file

devServer: {
  writeToDisk: true
}

Upvotes: 1

solanki...
solanki...

Reputation: 5098

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

Upvotes: 0

Sun
Sun

Reputation: 2688

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

module.exports = {
    watch: true,
};

Upvotes: 0

Alejandro Napoles
Alejandro Napoles

Reputation: 91

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.

Upvotes: 4

Austin Shoecraft
Austin Shoecraft

Reputation: 215

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

Upvotes: 5

Related Questions