webpack not generating bundle.js

Question

I am making a web app use react and php and i am using webpack for es6 to js so i generated files but i have a problem about webpack output bundle.js file.

this is my webpack.config.js

const webpack = require('webpack');

module.exports = {
  entry: [
    './src/index.jsx'
  ],
  output: {
    path: '/dist',
    publicPath: '/dist/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
  },
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env', 'react']
        }
      }
    }, {
      test: /(\.css|.scss)$/,
      use: [{
        loader: "style-loader"
      }, {
        loader: "css-loader"
      }, {
        loader: "sass-loader"
      }]
    }]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  }
};

this is my package.json

{
  "name": "react-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --history-api-fallback --progress --colors --config ./webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "axios": "^0.17.1",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "clean-webpack-plugin": "^0.1.18",
    "css-loader": "^0.28.9",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.7.2",
    "react-hot-loader": "^3.1.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  },
  "dependencies": {
    "bootstrap": "^4.0.0",
    "express": "^4.16.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router-dom": "^4.2.2",
    "reactstrap": "^5.0.0-beta"
  }
}

why webpack generate and give me a bundle.js into the dist folder ? only saves it to the memory and show it on the localhost. i want use this react app with php but i can not handle to bundle.js. Where is the problem and why the webpack did not generate the js file. please help me

this is because you are running webpack-dev-server. run webpack. In scripts add "build": "webpack-dev-server --history-api-fallback --progress --colors --config ./webpack.config.js" as second line. Seperate both by a , — illiteratewriter
– illiteratewriter, Commented Feb 7, 2018 at 11:26

yue you · Accepted Answer · 2018-02-07 11:41:50Z

10

Your webpack configuration output filed got problem.

import const path = require('path') first in webpack.config.js and change output filed as below:

output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',
    filename: 'bundle.js'
}

And add following script into your package.json in script filed "build": "webpack -p --progress"

Run npm run build

edited Feb 7, 2018 at 11:41

answered Feb 7, 2018 at 11:37

yue you

2,2641 gold badge14 silver badges31 bronze badges

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

4 Comments

Dan Zuzevich Over a year ago

I would try this one. Put the const path statement at the top of your webpack config file, then change the output like yue says. See what happens.

yue you Over a year ago

Glad that I can help

Hidayt Rahman Over a year ago

This working for me as it's generating a bundle, but now it is not watching the files and not opening with the port localhost:8080

yue you Over a year ago

Watching files is not related to this config. It is related to webpack.js.org/configuration/watch

devdigital · Accepted Answer · 2018-02-07 11:33:38Z

1

This is the expected behaviour for webpack dev server. If you wish to generate the output on disk, you need to run webpack, e.g:

"scripts": {
  "start": "webpack-dev-server --history-api-fallback ...",
  "build": "webpack"
}

then run npm build. For production, you should also set NODE_ENV=production, for example using cross-env:

"build": "cross-env NODE_ENV=production webpack"

edited Feb 7, 2018 at 11:33

answered Feb 7, 2018 at 11:30

devdigital

34.4k9 gold badges102 silver badges122 bronze badges

3 Comments

Hanik Over a year ago

not any error message. i got only this Version: webpack 3.10.0 Time: 3784ms Asset Size Chunks Chunk Names ./dist/bundle.js 1.49 MB 0 [emitted] [big] main [38] (webpack)/buildin/global.js 509 bytes {0} [built] [44] multi ./src/index.jsx 28 bytes {0} [built] [45] ./src/index.jsx 604 bytes {0} [built] + 122 hidden modules

devdigital Over a year ago

and a ./dist/bundle.js file outputted?

devdigital Over a year ago

Your config is incorrect for the output settings - see the example at webpack.js.org/configuration. i.e. it states 'output.path' must be an absolute path

Collectives™ on Stack Overflow

webpack not generating bundle.js

2 Answers 2

4 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Related