CODEWITHSUNDEEP
node.jsreactjsbundlewebpack-dev-serverpackage.json
bytise
bytise

Reputation: 113

Bundle.js file is not seen in folder though browser is giving correct output for Hello World. reactJS, npm, babel, webpack server

The bundle.js file is getting generated but not in the folder specified in webpack.configure.json (Where exactly(which folder and path) it is getting put into, is not clear) The browser shows correct output. There is no error. I have installed the following from the command prompt (for windows)

I expect to see the bundle.js file being created in the sample3 folder but its not there after executing the command webpack-dev-server

The webpack.configure.json file is given below

    module.exports = {
  entry: "./app.js",
  output: {
    filename: "bundle.js"
  }
}

The package.json file is given below

{
  "name": "sample3",
  "version": "1.0.0",
  "description": "reactjs sample application",
  "main": "app.js",
  "scripts": {
   "start": "webpack-dev-server --hot"   },
  "keywords": [
    "reactjs"
  ],
  "author": "abc",
  "license": "ISC",
  "dependencies": {
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}

The index.html file is also given below

<html>
  <body>
  <h3>"Hi there this works"</h3>
    <script src="bundle.js"></script>
  </body>
</html>

The app.js file is below

document.write('welcome to my first app!hooray!');
console.log('app loaded again!!yipee! hoohoo');

My questions are 1) What changes are required to see the bundle.js file getting generated in sample3 folder (same folder as the other above files) 2) Everytime I make a new small application(say toDoList) and put it into a folder say sample4, then do i have to execute the npm init and other above listed commands all over again?

The screenshot of command line after executing the webpack-dev-server command is given below too CommandPrompt

Upvotes: 0

Views: 4035

Answers (1)

Rico Herwig
Rico Herwig

Reputation: 1712

When using webpack-dev-server, the bundle file is created in memory for development, so there is nothing on your harddrive.

When you want to build the file (so that it appears on your drive), you would need to run webpack instead of webpack-dev-server in your console.

Example in package.json:

"scripts": {
    "build": "webpack"
}

Run this via npm run build.

Does this help? Let me know!

Upvotes: 5

Related Questions