{"id":19290993,"url":"https://github.com/kernix13/webpack-demo","last_synced_at":"2026-04-15T23:31:23.082Z","repository":{"id":111830196,"uuid":"557930028","full_name":"Kernix13/webpack-demo","owner":"Kernix13","description":"Another attempt at trying to leant to configure Webpack.","archived":false,"fork":false,"pushed_at":"2023-03-15T06:41:36.000Z","size":119,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-31T01:34:07.780Z","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/Kernix13.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-10-26T15:12:23.000Z","updated_at":"2022-11-10T21:59:01.000Z","dependencies_parsed_at":"2025-06-03T00:09:52.044Z","dependency_job_id":"58e48392-1761-4f95-95c2-3d1e67b91a97","html_url":"https://github.com/Kernix13/webpack-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Kernix13/webpack-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kernix13%2Fwebpack-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kernix13%2Fwebpack-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kernix13%2Fwebpack-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kernix13%2Fwebpack-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kernix13","download_url":"https://codeload.github.com/Kernix13/webpack-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kernix13%2Fwebpack-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31864934,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T15:24:51.572Z","status":"ssl_error","status_checked_at":"2026-04-15T15:24:39.138Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["webpack"],"created_at":"2024-11-09T22:23:17.842Z","updated_at":"2026-04-15T23:31:23.067Z","avatar_url":"https://github.com/Kernix13.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webpack Setup Demo\n\nColt Steele Webpack Demo 2019\n\nCheck out his repo: [webpack-demo-app](https://github.com/Colt/webpack-demo-app) and the [Webpack main documention](https://webpack.js.org/concepts/).\n\nI stopped coding along when he started using `template.html` or `html-webpack-plugin`, plus I was not able t o use SASS either - something about `dart-sass` so this video series was a bust on some practical code but I did get some more insights into using Webpack. Also, I don't think I would split up my config file like he did - I like th common object and then an if statement for `dev` or `prod`. Here are my notes:\n\n## Video 1\n\n- Webpack bundles many files into a smaller number of files nd manages dependencies\n\n## Installing and Running Webpack\n\n- [Learn Webpack Pt. 2: Installing and Running Webpack and Webpack-CLI](https://youtu.be/5XrYSbUbS9o)\n- FIRST: break the starter code into separate files and then add script files for them\n- but the order is important and in a large app that is difficult\n\n### Install Weback\n\n- Create `package.json`: `npm init -y` or without `-y`\n- Install Webpack: `npm install -D webpack webpack-cli` or replace `-D` with `--save-dev`\n- Set up `scripts` in `package.json`: use `start` and set it to `webpack` so running `npm start` in the command line will call Webpack\n- you can run that cmd right now but you will run into problems - before we configure webpack, ...\n- by default, when you install Webpack and you don't have a `.config.js` file, it has a couple of default values one of which is `index.js` in `./src` which is the default entry point\n- so create a file in `src` with that name - if you run `npm start` now you will get a message about a file name `main.js` and a warning about not setting the mode\n- Okay, I got a lot of errors -\n\n## Imports Exports and Webpack Modules\n\nVideo: [Learn Webpack Pt. 3: Imports, Exports, \u0026 Webpack Modules](https://youtu.be/8QYt1_17nk8)\n\n- import files\n- what is going in `index.js` - it's our entry-point -\n- check the commit `Webpack now bundling all our app code` - may need to download and copy all of that\n- End of Commit 4: https://github.com/Colt/webpack-demo-app/commit/2b11dd3624422ac8f57fced592dd824230c83693\n\n## Configuring Webpack\n\nVideo: [Learn Webpack Pt. 4: Configuring Webpack](https://youtu.be/ZwWiDZoPMB0)\n\n- without a config fie, Webpack is looking for an entry point in `src/index.js` - the only thing we did was create a `start` script\n- also by default, Webpack is putting the bundled code in `dist/main.js`\n- to change any of that or to add things, you need a config file - he wants one for dev and for prod, but for now just one - name it `webpack.config.js`, although he says you can name it whatever you want\n- the first line should be `module.exports = {` and he added `entry` and `output`\n- for the `path` property we need to import/require a module from Node.js called `path` then: `path: path.resolve(__dirname, \"dist\")`\n- that \"resolves\" an ABSOLUTE path to that code directory - doing `pwd` for me resulted in `/c/Users/14844/Documents/WebDev/Steele/webpack-demo` - but if anyone contributes or clones your repo, you need it to be an absolute path for thier machine or for the path when live.\n- the last step is to tell Webpack to use this file:\n\n```json\n\"scripts\": {\n    \"start\": \"webpack --config webpack.config.js\"\n  },\n```\n\n- besides `dist`, it's common to see `build` or `public`\n- the problem with `dist/main.js` is that the code is minified because it is running in `production` mode by default so add a `mode` prop and set it to `development`\n- more readable but still messed up IMO - it is also using `eval()` throughout main.js - to change that add `devtool: \"none\",` - NOPE, that caused an error - check out https://webpack.js.org/configuration/devtool/\n- use `devtool: false,`\n\n## Loaders CSS and SASS\n\nVideo: [Learn Webpack Pt. 5: Loaders, CSS, \u0026 SASS](https://youtu.be/rrMGUnBmjwQ)\n\n- JSON, CSS, SASS, SVG, etc - loaders!!!\n- Loaders are needed for different file types other than JS - they are used to pre-process diff types of files and are really useful\n- create `src/main.css` - you could include a link to it in your html fle but you want to use webpack -\n- we need 2 different loaders: `style-loader` and `css-loader`\n- `npm install --save-dev style-loader css-loader`\n- css-loader is to turn CSS into valid JS code but the CSS is not applied\n- style-loader takes the JS for the CSS from css-loader ad injects it into the DOM\n- the order is css-loader then style-loader but they load in reverse order so that is why style-loader is first in the array in the config file\n- later we will create a separate CSS file - commit so we can change it to load SASS files - here is the CSS Webpack rules:\n\n```js\nmodule: {\n  rules: [\n    {\n      test: /\\.css$/,\n      use: [\"style-loader\", \"css-loader\"]\n    }\n  ];\n}\n```\n\n- right now we are pulling Bootstrap in from a CDN but instead install it locally with `npm install --save-dev bootstrap` - remove the CDN link\n- remove the styles in main.css and rename it with .scss - then import bootstrap into that file\n- but now we need a loader for SASS: `sass-loader` - he mentions `node-sss` but the new command is `npm install sass-loader sass --save-dev`\n- WTF you need dart-sass or something - MOTHER FUCKING CAN'T USE SASS AGAIN\n\n## Cache Busting and Plugins\n\nVideo: [Learn Webpack Pt. 6: Cache Busting and Plugins](https://youtu.be/qXRGKiHmtF8)\n\n- how to prevent assets (JS, CSS) files cached by browsers when we don't want them to be cahced\n- add a content hash into the file name so users get changes - if nothing changes in the file, the hash doesn't change, it the code changes we get a new file name -\u003e cache busting\n- he changed the config file to `filename: \"main.[contenthash].js\",` but webpack has `filename: '[name].[contenthash].js',`\n- but how do you include that script file in the html - have Webpack build the HTML for us and add it to the dist folder - you need a plugin for that\n- search for `contenthash` on Webpack's site\n\n### Plugins\n\n- we need `HtmlWebpackPlugin` and we have to clean up the dist folder\n- `npm install --save-dev html-webpack-plugin`\n- add a key of plugins in the config file but rememeber to also require it in index.js\n- it will create a new html file: `dist/index.html` with the hashed JS file in a script tag (in the `\u003chead\u003e` tag though???)\n- from webpack:\n\n\u003e \"You can either let the plugin generate an HTML file for you, supply your own template using lodash templates, or use your own loader\"\n\n- inside `src` create `template.html` - think this is wrong - old video\n- he passed in an object in the plugin function call\n\n## Splitting Dev and Production\n\nVideo: [Learn Webpack Pt. 7: Splitting Dev \u0026 Production](https://youtu.be/VR5y93CNzeA)\n\n- 3 config files: cmmon, dev, prod\n- no more coding from here because I'm not creating `template.html`\n- create `webpack.dev.js` and `webpack.prod.js` and change config file to `webpack.common.js`\n\n`webpack.common.js`:\n\n```js\nconst HtmlWebpackPlugin = require(\"html-webpack-plugin\");\n\nmodule.exports = {\n  entry: \"./src/index.js\",\n  plugins: [new HtmlWebpackPlugin()]\n};\n```\n\n`webpack.dev.js`:\n\n```js\nconst path = require(\"path\");\nconst common = require(\"./webpack.common\");\nconst merge = require(\"webpack-merge\");\n\nmodule.exports = merge(common, {\n  mode: \"development\",\n  output: {\n    filename: \"main.js\",\n    path: path.resolve(__dirname, \"dist\")\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\"style-loader\", \"css-loader\"]\n      }\n    ]\n  }\n});\n```\n\n`webpack.prod.js`:\n\n```js\nconst path = require(\"path\");\nconst common = require(\"./webpack.common\");\nconst merge = require(\"webpack-merge\");\n\nmodule.exports = merge(common, {\n  mode: \"production\",\n  output: {\n    filename: \"main.[contenthash].js\",\n    path: path.resolve(__dirname, \"dist\")\n  }\n});\n```\n\n- then you need the package `npm install --save-dev webpack-merge`\n- the commands are `npm start` and `npm run build`\n- then install `npm install --save-dev webpack-dev-server`\n- then change package.json:\n\n```json\n\"scripts\": {\n    \"start\": \"webpack-dev-server --config webpack.dev.js --open\",\n    \"build\": \"webpack --config webpack.prod.js\"\n  },\n```\n\n- `--open` is an optional flag to open the file in the browser\n- `rm -rf dist` to remove the dist folder\n\n## HTML Loader File and Loader and Clean Webpack\n\nVideo: [Learn Webpack Pt. 8: Html-loader, File-loader, \u0026 Clean-webpack](https://youtu.be/mnS_1lolc44)\n\n- IMAGES: we need all our assets in the dist folder - we need to copy them into that folder and hash the file names - move the assets folder into `src` if it is not already there\n- we need 2 packages: html-loader and file-loader - we need to require in the images and then handle images in the webpack file\n- `npm install --save-dev html-loader file-loader` - then in webpack.common.js add them to rules:\n\n```js\nrules: [\n  {\n    test: /\\.html$/,\n    use: [\"html-loader\"]\n  },\n  {\n    test: /\\.{jpg|jpeg|png|gif|svg}$/,\n    use: {\n      loader: \"file-loader\",\n      options: {\n        name: \"[name].[hash].[ext]\",\n        outputPath: \"imgs\"\n      }\n    }\n  }\n];\n```\n\n- the reason for the `options` object is the hash the file name\n- looks like you don't have to use `require()` for images\n- Clean Webpack Plugin: `npm install --save-dev clean-webpack-plugin`\n- in webpack.prod.js require it in then pass it into a plugins value\n- looks like plugins get the `new` keyword and parens\n\n## Multiple Entrypoints and Vendor JS\n\nVideo: [Learn Webpack Pt. 9: Multiple Entrypoints \u0026 Vendor.js](https://youtu.be/PT0znBWIVnU)\n\n- to separate out app code from vendor code like Bootstrap and/or jQuery\n- they will never change but your code will\n- set up a new entry point - create `src/vendor.js` and inside add `import \"bootstrap\";`\n- then in the common config file, change entry to:\n\n```js\nentry: {\n    main: \"./src/index.js\",\n    vendor: \"./src/vendor.js\"\n  },\n```\n\n- in t he prod file refactor `filename` in t he `output` object to `filename: \"[name].[contenthash].bundle.js\",` and in the dev file change it to `filename: \"[name].bundle.js\",`\n- note for Bootstrap js you also need to install 2 dependencies: jquery and popper.js\n\n## Extract CSS and Minify\n\nVideo: [Learn Webpack Pt. 10: Extract CSS \u0026 Minify HTML/CSS/JS](https://youtu.be/JlBDfj75T3Y)\n\n- Flash Of Unstyled Content - need a separate CSS file\n- in development you don't want to wait to recompile and bundle CSS files\n- `npm install --save-dev mini-css-extract-plugin` though I don't think it's a `devDependencies` - then require it into the prod file and we need to use it instead of style-loader which is in the common file\n\n```js\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\")\n\nmodule: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [MiniCssExtractPlugin.loader, \"css-loader\"]\n      }\n    ]\n  },\n\nplugins: [new MiniCssExtractPlugin({filename: [name].[contenthash].css}), new CleanWebpackPlugin()]\n```\n\n- but the file is not minified - he is using a plugin named `optimize-css-assets-webpack-plugin` but maybe try `CssMinimizerWebpackPlugin`\n- terser-webpack-plugin is needed for JS because of using the above plugin\n\n\u003e NEED A DAMN RECENT SERIES ON HOW TO USE WEBPACK!!!!!!!!!!\n\nThe last thing he mentioned is important, not verbatim but:\n\n\u003e \"...companies that use Webpack already have it configured and it hardly changes so you won't need to d much with it.\"\n\nSo I'm wasting my time because it's not a likely job requirement - **Use Parcel**!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkernix13%2Fwebpack-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkernix13%2Fwebpack-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkernix13%2Fwebpack-demo/lists"}