Javascript Development Build.md

After npm init and you do all that noise, for setup

1. npm install --save-dev webpack webpack-dev-server babel-loader babel-core

Note: insert react-hot-loader and react etc, if you are working on React projects

example: npm install --save react react-dom history react-router

2. touch webpack.config.js and add this boilerplate:

  entry: "./src/index.js",
  output: {
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ]
  },
  externals: {
    "jquery": "jQuery"
  }
}

• Every JavaScript file will be processed by babel during the bundling

3. Setup a preset

npm install --save-dev babel-preset-latest

4. Create a file called .bablerc in project root. Paste this:

  "presets": ["latest"]
}

5. Open package.json and append:

    "watch": "webpack --watch"```
    
6) `npm install --save-dev node-sass`

and then add that compile to webpack command

7) ```"build": "webpack && node-sass ./scss -o ./css && exit 0",
    "watch": "webpack --watch & node-sass --watch ./scss -o ./css"```
    
    - for build, bundle the JS, compile the SCSS and then exit
    - for watch, both actions stay running indefinitely