├── .gitignore ├── LICENSE ├── README.md ├── logo.png ├── logo.svg ├── webpack-p.png └── webpack.png /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Gokulakrishnan Kalaikovan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [How To Setup Webpack 2](https://gokulkrishh.github.io/webpack/2017/02/03/how-to-setup-webpack-2.html) 2 | 3 | > Simple tutorial on how to setup webpack v2. 4 | 5 | ## Read my blog post on [how to setup webpack 2](https://gokulkrishh.github.io/webpack/2017/02/03/how-to-setup-webpack-2.html) 6 | 7 | ## Table of content 8 | 9 | 1. [Create folder](#step-1---create-folder) 10 | 1. [Install webpack](#step-2---install-webpack) 11 | 1. [Write webpack config](#step-3---write-webpack-config) 12 | 1. [Run the webpack](#step-4---run-the-webpack) 13 | 1. [Setup webpack development server](#step-5---setup-webpack-development-server) 14 | 1. [Run development server](#step-6---run-development-server) 15 | 1. [Setup development & production env](#step-7---setup-dev--prod-environment) 16 | 1. [Sourcemap for development & production](#step-8---sourcemap-for-dev--prod) 17 | 18 | ### Setup & Installation 19 | 20 | ### **```Step 1```** - Create folder 21 | 22 | First let's create a directory called ```webpack-2-demo``` and initialize npm: 23 | 24 | ```bash 25 | $ mkdir webpack-2-demo && cd webpack-2-demo 26 | $ npm init -y 27 | ``` 28 | 29 | ### **```Step 2```** - Install webpack 30 | 31 | ```bash 32 | $ npm install --save-dev webpack@latest webpack-dev-server@latest 33 | ``` 34 | 35 | or do it via [Yarn](https://yarnpkg.com/) 36 | 37 | ```bash 38 | $ yarn add --dev webpack@latest webpack-dev-server@latest 39 | ``` 40 | 41 | ### **```Step 3```** - Write webpack config 42 | 43 | Create a ```webpack.config.js``` in root of our directory and let's write some configuration. 44 | 45 | ```js 46 | var webpack = require('webpack'); 47 | 48 | var config = { 49 | context: __dirname + '/src', // `__dirname` is root of project and `src` is source 50 | entry: { 51 | app: './app.js', 52 | }, 53 | output: { 54 | path: __dirname + '/dist', // `dist` is the destination 55 | publicPath: "/assets/", 56 | filename: 'bundle.js', 57 | }, 58 | }; 59 | 60 | module.exports = config; 61 | ``` 62 | 63 | Now lets add [lodash](https://lodash.com) to dependencies in ```package.json``` by. 64 | 65 | ```bash 66 | $ yarn add --dev lodash 67 | ``` 68 | 69 | And let's write some code in ```src/app.js``` 70 | 71 | ```js 72 | var _ = require('lodash'); 73 | 74 | var array = [1]; 75 | var other = _.concat(array, 2, [3], [[4]]); 76 | 77 | console.log(other); //[1, 2, 3, [4]] 78 | ``` 79 | 80 | ### **```Step 4```** - Run the webpack 81 | 82 | To run webpack in ```development mode```. 83 | 84 | ```bash 85 | $ webpack 86 | ``` 87 | 88 | *Screenshot of development server* 89 | 90 | 91 | 92 | **Total Size:** 208KB 93 | 94 | or run webpack in ```production mode```. 95 | 96 | ```bash 97 | $ webpack -p 98 | ``` 99 | 100 | - ```p``` is for production which uglifies and minifies files. 101 | 102 | *Screenshot of development server* 103 | 104 | 105 | 106 | **Total Size:** 38KB 107 | 108 | ### **```Step 5```** - Setup webpack development server 109 | 110 | Webpack has its own development server. Lets setup that in ```webpack.config.js``` by adding the following. 111 | 112 | ```js 113 | devServer: { 114 | open: true, // to open the local server in browser 115 | contentBase: __dirname + '/src', 116 | }, 117 | ``` 118 | 119 | And add the script for ```bundle.js``` in ```src/index.html```. 120 | 121 | ```html 122 | 123 | 124 | 125 | Webpack 2 Demo 126 | 127 | 128 | 129 | 130 | 131 | 132 | ``` 133 | 134 | ### **```Step 6```** - Run development server 135 | 136 | Run development server. 137 | 138 | ```bash 139 | $ webpack-dev-server 140 | ``` 141 | 142 | Open [http://localhost:8080/](http://localhost:8080/) in your browser. 143 | 144 | Thats all basic webpack config is done. But what about ```SASS, IMAGES, ES6``` loaders ? How to setup that ? Lets see. 145 | 146 | ### Loaders 147 | 148 | Lets set up ```ES6 + Babel``` using a webpack loader. 149 | 150 | ### **```Step 1```** - Install babel loader,core & ES6 preset. 151 | 152 | ```bash 153 | $ npm install --save-dev babel-loader babel-core babel-preset-es2015 154 | ``` 155 | After installation, We have to add config to ```webpack.config.js``` file. 156 | 157 | ### **```Step 2```** - ES6 Loader 158 | 159 | ```js 160 | module: { 161 | rules: [ 162 | { 163 | test: /\.js$/, //Check for all js files 164 | loader: 'babel-loader', 165 | query: { 166 | presets: [ "babel-preset-es2015" ].map(require.resolve) 167 | } 168 | } 169 | ] 170 | } 171 | ``` 172 | 173 | In order to check babel loader, we will change ```app.js``` to ES6 syntax. 174 | 175 | ```js 176 | 'use strict'; 177 | 178 | import _ from 'lodash'; //ES6 import to check our babel loader 179 | 180 | const array = [1]; 181 | const other = _.concat(array, 2, [3], [[4]]); 182 | 183 | console.log(other); //[1, 2, 3, [4]] 184 | ``` 185 | 186 | Run the development server and check the console. 187 | 188 | ```bash 189 | $ webpack-dev-server 190 | ``` 191 | 192 | ### **```Step 3```** - SASS & CSS Loader 193 | 194 | Install SASS & CSS Loader 195 | 196 | ```bash 197 | $ npm install --save-dev css-loader style-loader sass-loader node-sass 198 | ``` 199 | 200 | SASS & CSS loader config for webpack is below. 201 | 202 | ```js 203 | module: { 204 | rules: [{ 205 | test: /\.(sass|scss)$/, //Check for sass or scss file names 206 | use: [ 207 | 'style-loader', 208 | 'css-loader', 209 | 'sass-loader', 210 | ] 211 | }] 212 | } 213 | ``` 214 | 215 | After `loaders`, final steps are setting up sourcemaps and env for webpack. 216 | 217 | ### **```Step 7```** - Setup Dev & Prod Environment 218 | 219 | In `package.json` file, lets add scripts to run our dev server and build with env. 220 | 221 | ```json 222 | "scripts": { 223 | "start": "webpack-dev-server", 224 | "build": "NODE_ENV=production webpack -p --config webpack.config.js" 225 | } 226 | ``` 227 | 228 | `NODE_ENV=production` is environment set for build. Using `process.env.NODE_ENV`, we can check the env in webpack. 229 | 230 | ### **```Step 8```** - Sourcemap for Dev & Prod 231 | 232 | Now we know when we are running production build or development. Lets use it to setup the sourcemap accordingly. 233 | 234 | ```js 235 | 236 | var config = { 237 | devtool: "eval-source-map" // Default development sourcemap 238 | }; 239 | 240 | // Check if build is running in production mode, then change the sourcemap type 241 | if (process.env.NODE_ENV === "production") { 242 | config.devtool = "source-map"; 243 | } 244 | 245 | module.exports = config; 246 | ``` 247 | 248 | More information on [sourcemaps](http://erikaybar.name/webpack-source-maps-in-chrome/?utm_source=javascriptweekly&utm_medium=email) 249 | 250 | ### **```Final```** 251 | 252 | Final step contains all the config for webpack from above. 253 | 254 | ```js 255 | 'use strict'; 256 | var webpack = require('webpack'); 257 | 258 | var config = { 259 | context: __dirname + '/src', // `__dirname` is root of project and `src` is source 260 | entry: { 261 | app: './app.js', 262 | }, 263 | output: { 264 | path: __dirname + '/dist', // `dist` is the destination 265 | filename: 'bundle.js', 266 | publicPath: "/assets", 267 | }, 268 | module: { 269 | rules: [ 270 | { 271 | test: /\.js$/, //Check for all js files 272 | loader: 'babel-loader', 273 | query: { 274 | presets: [ "babel-preset-es2015" ].map(require.resolve) 275 | } 276 | }, 277 | { 278 | test: /\.(sass|scss)$/, //Check for sass or scss file names 279 | use: [ 280 | 'style-loader', 281 | 'css-loader', 282 | 'sass-loader', 283 | ] 284 | }, 285 | { 286 | test: /\.json$/, 287 | loader: "json-loader" //JSON loader 288 | } 289 | ] 290 | }, 291 | //To run development server 292 | devServer: { 293 | contentBase: __dirname + '/src', 294 | }, 295 | 296 | devtool: "eval-source-map" // Default development sourcemap 297 | }; 298 | 299 | // Check if build is running in production mode, then change the sourcemap type 300 | if (process.env.NODE_ENV === "production") { 301 | config.devtool = "source-map"; 302 | 303 | // Can do more here 304 | // JSUglify plugin 305 | // Offline plugin 306 | // Bundle styles seperatly using plugins etc, 307 | } 308 | 309 | module.exports = config; 310 | ``` 311 | 312 | Thats all. Thanks for reading my repo. 313 | 314 | #### Articles 315 | 316 | - [Getting started with webpack 2](https://blog.madewithenvy.com/getting-started-with-webpack-2-ed2b86c68783#.3dou6bawv) 317 | - [Webpack examples](https://github.com/webpack/webpack/tree/master/examples) 318 | - [Moving to webpack 2](http://javascriptplayground.com/blog/2016/10/moving-to-webpack-2/) 319 | -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gokulkrishh/how-to-setup-webpack-2/89cec946410483d7956aaea291f30ef16a672dc2/logo.png -------------------------------------------------------------------------------- /logo.svg: -------------------------------------------------------------------------------- 1 | icon-square-small 2 | -------------------------------------------------------------------------------- /webpack-p.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gokulkrishh/how-to-setup-webpack-2/89cec946410483d7956aaea291f30ef16a672dc2/webpack-p.png -------------------------------------------------------------------------------- /webpack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gokulkrishh/how-to-setup-webpack-2/89cec946410483d7956aaea291f30ef16a672dc2/webpack.png --------------------------------------------------------------------------------