{"id":14976362,"url":"https://github.com/gokulkrishh/how-to-setup-webpack-2","last_synced_at":"2025-08-10T13:09:08.421Z","repository":{"id":75800598,"uuid":"72708027","full_name":"gokulkrishh/how-to-setup-webpack-2","owner":"gokulkrishh","description":"🔧 ⚙ Tutorial to setup webpack 2 from scratch.","archived":false,"fork":false,"pushed_at":"2017-08-08T04:51:11.000Z","size":592,"stargazers_count":108,"open_issues_count":0,"forks_count":10,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-08T11:43:36.836Z","etag":null,"topics":["build-tool","how-to","webpack","webpack2","webpack2-boilerplate"],"latest_commit_sha":null,"homepage":"https://gokulkrishh.github.io/webpack/2017/02/03/how-to-setup-webpack-2.html","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gokulkrishh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-03T04:12:21.000Z","updated_at":"2023-02-11T18:57:57.000Z","dependencies_parsed_at":"2023-06-07T19:00:21.241Z","dependency_job_id":null,"html_url":"https://github.com/gokulkrishh/how-to-setup-webpack-2","commit_stats":{"total_commits":31,"total_committers":5,"mean_commits":6.2,"dds":"0.12903225806451613","last_synced_commit":"89cec946410483d7956aaea291f30ef16a672dc2"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gokulkrishh/how-to-setup-webpack-2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gokulkrishh%2Fhow-to-setup-webpack-2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gokulkrishh%2Fhow-to-setup-webpack-2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gokulkrishh%2Fhow-to-setup-webpack-2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gokulkrishh%2Fhow-to-setup-webpack-2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gokulkrishh","download_url":"https://codeload.github.com/gokulkrishh/how-to-setup-webpack-2/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gokulkrishh%2Fhow-to-setup-webpack-2/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269727403,"owners_count":24465452,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["build-tool","how-to","webpack","webpack2","webpack2-boilerplate"],"created_at":"2024-09-24T13:53:46.827Z","updated_at":"2025-08-10T13:09:08.372Z","avatar_url":"https://github.com/gokulkrishh.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# [How To Setup Webpack 2](https://gokulkrishh.github.io/webpack/2017/02/03/how-to-setup-webpack-2.html)\n\n\u003e Simple tutorial on how to setup webpack v2.\n\n## Read my blog post on [how to setup webpack 2](https://gokulkrishh.github.io/webpack/2017/02/03/how-to-setup-webpack-2.html)\n\n## Table of content\n\n1. [Create folder](#step-1---create-folder)\n1. [Install webpack](#step-2---install-webpack)\n1. [Write webpack config](#step-3---write-webpack-config)\n1. [Run the webpack](#step-4---run-the-webpack)\n1. [Setup webpack development server](#step-5---setup-webpack-development-server)\n1. [Run development server](#step-6---run-development-server)\n1. [Setup development \u0026 production env](#step-7---setup-dev--prod-environment)\n1. [Sourcemap for development \u0026 production](#step-8---sourcemap-for-dev--prod)\n\n### Setup \u0026 Installation\n\n### **```Step 1```** - Create folder\n\nFirst let's create a directory called ```webpack-2-demo``` and initialize npm:\n\n```bash\n$ mkdir webpack-2-demo \u0026\u0026 cd webpack-2-demo\n$ npm init -y\n```\n\n### **```Step 2```** - Install webpack\n\n```bash\n$ npm install --save-dev webpack@latest webpack-dev-server@latest\n```\n\nor do it via [Yarn](https://yarnpkg.com/)\n\n```bash\n$ yarn add --dev webpack@latest webpack-dev-server@latest\n```\n\n### **```Step 3```** - Write webpack config\n\nCreate a ```webpack.config.js``` in root of our directory and let's write some configuration.\n\n```js\nvar webpack = require('webpack');\n\nvar config = {\n  context: __dirname + '/src', // `__dirname` is root of project and `src` is source\n  entry: {\n    app: './app.js',\n  },\n  output: {\n    path: __dirname + '/dist', // `dist` is the destination\n    publicPath: \"/assets/\",\n    filename: 'bundle.js',\n  },\n};\n\nmodule.exports = config;\n```\n\nNow lets add [lodash](https://lodash.com) to dependencies in ```package.json``` by.\n\n```bash\n$ yarn add --dev lodash\n```\n\nAnd let's write some code in ```src/app.js```\n\n```js\nvar _ = require('lodash');\n\nvar array = [1];\nvar other = _.concat(array, 2, [3], [[4]]);\n\nconsole.log(other); //[1, 2, 3, [4]]\n```\n\n### **```Step 4```** - Run the webpack\n\nTo run webpack in ```development mode```.\n\n```bash\n$ webpack\n```\n\n*Screenshot of development server*\n\n\u003cimg src=\"https://raw.githubusercontent.com/gokulkrishh/how-to-setup-webpack-2/master/webpack.png\" style=\"max-width: 100%\" /\u003e\n\n**Total Size:** 208KB\n\nor run webpack in ```production mode```.\n\n```bash\n$ webpack -p\n```\n\n- ```p``` is for production which uglifies and minifies files.\n\n*Screenshot of development server*\n\n\u003cimg src=\"https://raw.githubusercontent.com/gokulkrishh/how-to-setup-webpack-2/master/webpack-p.png\" style=\"max-width: 100%\" /\u003e\n\n**Total Size:** 38KB\n\n### **```Step 5```** - Setup webpack development server\n\nWebpack has its own development server. Lets setup that in ```webpack.config.js``` by adding the following.\n\n```js\ndevServer: {\n  open: true, // to open the local server in browser\n  contentBase: __dirname + '/src',\n},\n```\n\nAnd add the script for ```bundle.js``` in ```src/index.html```.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eWebpack 2 Demo\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n  \u003cscript src=\"/assets/bundle.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### **```Step 6```** - Run development server\n\nRun development server.\n\n```bash\n$ webpack-dev-server\n```\n\nOpen [http://localhost:8080/](http://localhost:8080/) in your browser.\n\nThats all basic webpack config is done. But what about ```SASS, IMAGES, ES6``` loaders ? How to setup that ? Lets see.\n\n### Loaders\n\nLets set up ```ES6 + Babel``` using a webpack loader.\n\n### **```Step 1```** - Install babel loader,core \u0026 ES6 preset.\n\n```bash\n$ npm install --save-dev babel-loader babel-core babel-preset-es2015\n```\nAfter installation, We have to add config to ```webpack.config.js``` file.\n\n### **```Step 2```** - ES6 Loader\n\n```js\nmodule: {\n  rules: [\n    {\n      test: /\\.js$/, //Check for all js files\n      loader: 'babel-loader',\n      query: {\n        presets: [ \"babel-preset-es2015\" ].map(require.resolve)\n      }\n    }\n  ]\n}\n```\n\nIn order to check babel loader, we will change ```app.js``` to ES6 syntax.\n\n```js\n'use strict';\n\nimport _ from 'lodash'; //ES6 import to check our babel loader\n\nconst array = [1];\nconst other = _.concat(array, 2, [3], [[4]]);\n\nconsole.log(other); //[1, 2, 3, [4]]\n```\n\nRun the development server and check the console.\n\n```bash\n$ webpack-dev-server\n```\n\n### **```Step 3```** - SASS \u0026 CSS Loader\n\nInstall SASS \u0026 CSS Loader\n\n```bash\n$ npm install --save-dev css-loader style-loader sass-loader node-sass\n```\n\nSASS \u0026 CSS loader config for webpack is below.\n\n```js\nmodule: {\n  rules: [{\n    test: /\\.(sass|scss)$/, //Check for sass or scss file names\n    use: [\n      'style-loader',\n      'css-loader',\n      'sass-loader',\n    ]\n  }]\n}\n```\n\nAfter `loaders`, final steps are setting up sourcemaps and env for webpack.\n\n### **```Step 7```** - Setup Dev \u0026 Prod Environment\n\nIn `package.json` file, lets add scripts to run our dev server and build with env.\n\n```json\n\"scripts\": {\n  \"start\": \"webpack-dev-server\",\n  \"build\": \"NODE_ENV=production webpack -p --config webpack.config.js\"\n}\n```\n\n`NODE_ENV=production` is environment set for build. Using `process.env.NODE_ENV`, we can check the env in webpack.\n\n### **```Step 8```** - Sourcemap for Dev \u0026 Prod\n\nNow we know when we are running production build or development. Lets use it to setup the sourcemap accordingly.\n\n```js\n\nvar config = {\n  devtool: \"eval-source-map\" // Default development sourcemap\n};\n\n// Check if build is running in production mode, then change the sourcemap type\nif (process.env.NODE_ENV === \"production\") {\n  config.devtool = \"source-map\";\n}\n\nmodule.exports = config;\n```\n\nMore information on [sourcemaps](http://erikaybar.name/webpack-source-maps-in-chrome/?utm_source=javascriptweekly\u0026utm_medium=email)\n\n### **```Final```**\n\nFinal step contains all the config for webpack from above.\n\n```js\n'use strict';\nvar webpack = require('webpack');\n\nvar config = {\n  context: __dirname + '/src', // `__dirname` is root of project and `src` is source\n  entry: {\n    app: './app.js',\n  },\n  output: {\n    path: __dirname + '/dist', // `dist` is the destination\n    filename: 'bundle.js',\n    publicPath: \"/assets\",\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.js$/, //Check for all js files\n        loader: 'babel-loader',\n        query: {\n          presets: [ \"babel-preset-es2015\" ].map(require.resolve)\n        }\n      },\n      {\n        test: /\\.(sass|scss)$/, //Check for sass or scss file names\n        use: [\n          'style-loader',\n          'css-loader',\n          'sass-loader',\n        ]\n      },\n      {\n        test: /\\.json$/,\n        loader: \"json-loader\"  //JSON loader\n      }\n    ]\n  },\n  //To run development server\n  devServer: {\n    contentBase: __dirname + '/src',\n  },\n\n  devtool: \"eval-source-map\" // Default development sourcemap\n};\n\n// Check if build is running in production mode, then change the sourcemap type\nif (process.env.NODE_ENV === \"production\") {\n  config.devtool = \"source-map\";\n\n  // Can do more here\n  // JSUglify plugin\n  // Offline plugin\n  // Bundle styles seperatly using plugins etc,\n}\n\nmodule.exports = config;\n```\n\nThats all. Thanks for reading my repo.\n\n#### Articles\n\n- [Getting started with webpack 2](https://blog.madewithenvy.com/getting-started-with-webpack-2-ed2b86c68783#.3dou6bawv)\n- [Webpack examples](https://github.com/webpack/webpack/tree/master/examples)\n- [Moving to webpack 2](http://javascriptplayground.com/blog/2016/10/moving-to-webpack-2/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgokulkrishh%2Fhow-to-setup-webpack-2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgokulkrishh%2Fhow-to-setup-webpack-2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgokulkrishh%2Fhow-to-setup-webpack-2/lists"}