Cacher is the code snippet organizer for pro developers

# create a package.json to start your node project

npm init

name: getting-started-webpack
version: (1.0.0)
description: running a build with webpack
entry point: (index.js)
test command:
git repository:
keywords: webpack
author: Priscilla Rogriguez


About to write to /Users/priscillarodriguez/Desktop/webpack/package.json:

{
  "name": "getting-started-webpack",
  "version": "1.0.0",
  "description": "Running a build with webpack",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "webpack"
  ],
  "author": "Priscilla Rogriguez",
  "license": "ISC"
}

#install webpack into your dev dependencies. So anything we need for our development environment is going to appear there.

npm install webpack --save-dev


#example of regular dependecies - each have their own space

npm install jquery --save

#Dev dependencies vs regular dependecies
So dev dependencies are everything we need in development, things like testing frameworks and transpiling frameworks like webpack, dependencies are everything we need for the browser.

  "devDependencies": {
    "webpack": "^1.13.3"
  },
  "dependencies": {
    "jquery": "^3.1.1"
  }


----------------

Build

index.html
<script type="text/javascript" src="./bundle.js"></script>


main.js
var $ = require('jquery')
$('#target').html('Hello World');


terminal
webpack main.js ./bundle.js


#node not found
you can use

./node_modules/.bin/webpack main.js ./bundle.js  

or

#global install
npm install webpack -g


------

webpack.config.js

module.exports = {
	entry: './src/main.js',
	output: {
	  path: 'build',
		filename: 'bundle.js'
	}
};


#terminal - convert to bundle.js and create the folder build
webpack

# Is going to do automatically - watch
webpack -w


---------


Babel 6

Loaders - babel
Convert jsx - es6 get transpiled into plain Javascript

npm install babel-loader babel-core --save-dev


npm install babel-preset-es2015 babel-preset-react --save-dev



-------

Coffee script loader

npm install coffee-loader coffee-script --save-dev


--------------


React

npm install react react-dom --save


------------

CSS

npm install style-loader css-loader --save-dev


------------

SASS

npm install sass-loader node-sass --save-dev


----------

Loading images (similar to web loader)
We wanna do this because in-lining images will reduce the number of HTTP requests which will speed up our applications a lot

npm install url-loader file-loader --save-dev


-----


Code Splitting
--------------
For example, if I have an application that has About-us page and a Contact-us page we can tell Webpack to create bundles for each of these and then only the resources necessary for the page will be loaded. This reduces the size of the request and if someone visits the site and only goes to the About-us page, they won't load the Contact-us information


About-us.js 
About-us.bundle.js 


Contact-us.js 
Contact-us.bundle.js 


We can use Webpack to create bundles for shared code and for vendor code. So, for example, if I have About-us and Contact-us that use similar libraries or similar code, we can create a common file and the common file will be loaded first and cached.



About-us.js 
Contact-us.js 

Common.bundle.js 

thecommonschunkplugin
use to create a vendor bundle (code that we didn't write)
ex:
react
jquery


------------

webpack-dev-server

Another cool feature of webpack is it allows you to set up a development server that will automatically reload your project when things change

npm install webpack-dev-server --save-dev

change script package.json
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },

npm run build

npm start




--------------