├── .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 |
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
--------------------------------------------------------------------------------