{"id":20383487,"url":"https://github.com/smerth/webpack-v1-basics","last_synced_at":"2026-05-12T19:09:03.992Z","repository":{"id":44125612,"uuid":"66884770","full_name":"smerth/webpack-v1-basics","owner":"smerth","description":"This repo demonstrates how to set up webpack for various tasks","archived":false,"fork":false,"pushed_at":"2022-12-09T08:00:15.000Z","size":1538,"stargazers_count":0,"open_issues_count":11,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-15T07:58:42.422Z","etag":null,"topics":["webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/smerth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-29T22:17:29.000Z","updated_at":"2020-07-30T12:37:07.000Z","dependencies_parsed_at":"2023-01-25T13:31:29.289Z","dependency_job_id":null,"html_url":"https://github.com/smerth/webpack-v1-basics","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smerth%2Fwebpack-v1-basics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smerth%2Fwebpack-v1-basics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smerth%2Fwebpack-v1-basics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smerth%2Fwebpack-v1-basics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smerth","download_url":"https://codeload.github.com/smerth/webpack-v1-basics/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241935267,"owners_count":20044826,"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","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":["webpack"],"created_at":"2024-11-15T02:23:04.880Z","updated_at":"2026-05-12T19:08:58.941Z","avatar_url":"https://github.com/smerth.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webpack v1 Basics\n\n## About\n\nA series of exercises using webpack version 1\n\n## Usage\n\nThis is a yarn workspace.\n\nFrom the root run\n\n```bash\nyarn install\n```\n\nRun webpack for each app\n\n```bash\nyarn workspace 2-3 webpack\n```\n\nTo view each app cd into the app folder and run:\n\n```bash\npython3 -m http.server\n```\n\nDepending on your setup you may call `python` or `python2`...\n\nThe app is served at: http://0.0.0.0:8000/\n\n## 2-3 Process ES5\n\nTranspile es5 code in `src/main.js` into vanilla javascript in `build/bundle.js`\n\n@ webpack.config.js\n\n```javascript\nmodule.exports = {\n  entry: \"./src/main.js\",\n  output: {\n    path: \"build\",\n    filename: \"bundle.js\"\n  },\n  module: {\n    loaders: [\n      {\n        test: /\\.js$/,\n        exclude: /(node_modules)/,\n        loader: \"babel\",\n        query: {\n          presets: [\"es2015\", \"react\"]\n        }\n      }\n    ]\n  }\n};\n```\n\n## 2-4 Process Coffeescript\n\nTranspile coffeescript to javascript. Check the console to see the output message which was written in coffeescript.\n\n@ webpack.config.js\n\n```javascript\nmodule.exports = {\n  entry: \"./main.coffee\",\n  output: {\n    path: \"build\",\n    filename: \"bundle.js\"\n  },\n  module: {\n    loaders: [\n      {\n        test: /\\.coffee$/,\n        exclude: /(node_modules)/,\n        loader: \"coffee\"\n      }\n    ]\n  }\n};\n```\n\n## 3-1 Process React and CSS\n\nTranspile es5 / React and CSS.\n\n@ webpack.config.js\n\n```javascript\nmodule.exports = {\n  entry: \"./src/main.js\",\n  output: {\n    path: \"build\",\n    filename: \"bundle.js\"\n  },\n  module: {\n    loaders: [\n      {\n        test: /\\.js$/,\n        exclude: /(node_modules)/,\n        loader: \"babel\",\n        query: {\n          presets: [\"react\", \"es2015\"]\n        }\n      },\n      {\n        test: /\\.css$/,\n        loader: \"style-loader!css-loader\"\n      }\n    ]\n  }\n};\n```\n\n## 3-2 Process SCSS\n\nTranspile scss into css and inline it.\n\n@ webpack.config.js\n\n```javascript\nmodule.exports = {\n  entry: \"./src/main.js\",\n  output: {\n    path: \"build\",\n    filename: \"bundle.js\"\n  },\n  module: {\n    loaders: [\n      {\n        test: /\\.js$/,\n        exclude: /(node_modules)/,\n        loader: \"babel\",\n        query: {\n          presets: [\"react\", \"es2015\"]\n        }\n      },\n      {\n        test: /\\.scss$/,\n        loader: \"style-loader!css-loader!sass-loader\"\n      }\n    ]\n  }\n};\n```\n\n## 3-3 Process Images in SCSS\n\nMakes image urls available in SCSS\n\n@ webpack.config.js\n\n```javascript\nmodule.exports = {\n  entry: \"./src/main.js\",\n  output: {\n    path: \"build\",\n    filename: \"bundle.js\"\n  },\n  module: {\n    loaders: [\n      {\n        test: /\\.js$/,\n        exclude: /(node_modules)/,\n        loader: \"babel\",\n        query: {\n          presets: [\"react\", \"es2015\"]\n        }\n      },\n      {\n        test: /\\.scss$/,\n        loader: \"style-loader!css-loader!sass-loader\"\n      },\n      {\n        test: /\\.(png|jpg)$/,\n        loader: \"url\"\n      }\n    ]\n  }\n};\n```\n\n## 4-2 Multiple entry points\n\nProcesses a bundled js file for each entry point \"About\" and \"Contact\"\n\n@ webpack.config.js\n\n```javascript\nvar webpack = require(\"webpack\");\nvar path = require(\"path\");\n\nmodule.exports = {\n  entry: {\n    about: \"./dist/about\",\n    contact: \"./dist/contact\"\n  },\n  output: {\n    path: path.join(__dirname, \"build\"),\n    filename: \"[name].bundle.js\"\n  },\n  module: {\n    loaders: [\n      {\n        test: /\\.js$/,\n        exclude: /(node_modules)/,\n        loader: \"babel\",\n        query: {\n          presets: [\"react\", \"es2015\"]\n        }\n      },\n      {\n        test: /\\.scss$/,\n        loader: \"style-loader!css-loader!sass-loader\"\n      },\n      {\n        test: /\\.(png|jpg)$/,\n        loader: \"url-loader?limit=10000\"\n      }\n    ]\n  }\n};\n```\n\n4-3 Common Chunks\n\nCarve out the javascript common to all pages and serve as a `commons.bundle.js` file along with a `js` file specific to that page.\n\n@ webpack.config.js\n\n```javascript\nvar webpack = require(\"webpack\");\nvar path = require(\"path\");\nvar CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;\n\nmodule.exports = {\n  entry: {\n    about: \"./dist/about\",\n    contact: \"./dist/contact\",\n    main: \"./dist/main\"\n  },\n  output: {\n    path: path.join(__dirname, \"/build\"),\n    filename: \"[name].bundle.js\"\n  },\n  module: {\n    loaders: [\n      {\n        test: /\\.js$/,\n        exclude: /(node_modules)/,\n        loader: \"babel\",\n        query: {\n          presets: [\"react\", \"es2015\"]\n        }\n      },\n      {\n        test: /\\.scss$/,\n        loader: \"style-loader!css-loader!sass-loader\"\n      },\n      {\n        test: /\\.(png|jpg)$/,\n        loader: \"url-loader?limit=10000\"\n      }\n    ]\n  },\n  plugins: [new CommonsChunkPlugin(\"commons\", \"commons.bundle.js\")],\n  optimization: {\n    runtimeChunk: \"single\",\n    splitChunks: {\n      chunks: \"all\",\n      maxInitialRequests: Infinity,\n      minSize: 0,\n      cacheGroups: {\n        vendor: {\n          test: /[\\\\/]node_modules[\\\\/]/,\n          name(module) {\n            // get the name. E.g. node_modules/packageName/not/this/part.js or node_modules/packageName\n            const packageName = module.context.match(\n              /[\\\\/]node_modules[\\\\/](.*?)([\\\\/]|$)/\n            )[1];\n            // npm package names are URL-safe, but some servers don't like @ symbols\n            return `npm.${packageName.replace(\"@\", \"\")}`;\n          }\n        }\n      }\n    }\n  }\n};\n```\n\n## 4-4 Vendor Bundles\n\nA **vendor bundle** contains the third party code of your project.\n\n@ webpack.config.js\n\n```javascript\nvar webpack = require(\"webpack\");\nvar path = require(\"path\");\nvar CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;\n\nmodule.exports = {\n  entry: {\n    about: \"./dist/about\",\n    contact: \"./dist/contact\",\n    main: \"./dist/main\"\n  },\n  output: {\n    path: path.join(__dirname, \"/build\"),\n    filename: \"[name].bundle.js\"\n  },\n  module: {\n    loaders: [\n      {\n        test: /\\.js$/,\n        exclude: /(node_modules)/,\n        loader: \"babel\",\n        query: {\n          presets: [\"react\", \"es2015\"]\n        }\n      },\n      {\n        test: /\\.scss$/,\n        loader: \"style-loader!css-loader!sass-loader\"\n      },\n      {\n        test: /\\.(png|jpg)$/,\n        loader: \"url-loader?limit=10000\"\n      }\n    ]\n  },\n  plugins: [new CommonsChunkPlugin(\"commons\", \"commons.bundle.js\")],\n  optimization: {\n    runtimeChunk: \"single\",\n    splitChunks: {\n      chunks: \"all\",\n      maxInitialRequests: Infinity,\n      minSize: 0,\n      cacheGroups: {\n        vendor: {\n          test: /[\\\\/]node_modules[\\\\/]/,\n          name(module) {\n            // get the name. E.g. node_modules/packageName/not/this/part.js or node_modules/packageName\n            const packageName = module.context.match(\n              /[\\\\/]node_modules[\\\\/](.*?)([\\\\/]|$)/\n            )[1];\n            // npm package names are URL-safe, but some servers don't like @ symbols\n            return `npm.${packageName.replace(\"@\", \"\")}`;\n          }\n        }\n      }\n    }\n  }\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmerth%2Fwebpack-v1-basics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmerth%2Fwebpack-v1-basics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmerth%2Fwebpack-v1-basics/lists"}