{"id":20375273,"url":"https://github.com/cba85/teach-webpack","last_synced_at":"2026-04-17T06:33:26.721Z","repository":{"id":232496960,"uuid":"216771110","full_name":"cba85/teach-webpack","owner":"cba85","description":"👨‍🎓 Webpack","archived":false,"fork":false,"pushed_at":"2019-10-22T09:14:00.000Z","size":13,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-25T18:49:28.351Z","etag":null,"topics":["chalk","ora","webpack","webpack-merge"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"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/cba85.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}},"created_at":"2019-10-22T09:11:41.000Z","updated_at":"2025-06-13T10:07:27.000Z","dependencies_parsed_at":"2024-04-10T03:00:06.898Z","dependency_job_id":"82ea6d1e-bd18-453a-82c7-29369f2d85d6","html_url":"https://github.com/cba85/teach-webpack","commit_stats":null,"previous_names":["cba85/teach-webpack"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cba85/teach-webpack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cba85%2Fteach-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cba85%2Fteach-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cba85%2Fteach-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cba85%2Fteach-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cba85","download_url":"https://codeload.github.com/cba85/teach-webpack/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cba85%2Fteach-webpack/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31918575,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"online","status_checked_at":"2026-04-17T02:00:06.879Z","response_time":62,"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":["chalk","ora","webpack","webpack-merge"],"created_at":"2024-11-15T01:29:34.892Z","updated_at":"2026-04-17T06:33:26.695Z","avatar_url":"https://github.com/cba85.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webpack\n\n## Install\n\n```\n$ npm init\n$ npm install webpack --save\n```\n\n- Create src/app.js with console log\n\n```\n$ npx webpack src/app.js --mode=development\n```\n\n- Create index.html in dist/\n\n## Configuration file\n\n- Create webpack.config.js\n\n## Watch changes\n\n- add watch in package.json\n\n## Local server\n\nhttps://github.com/webpack/webpack-dev-server\n\n```\n$ npm install webpack-dev-server --save-dev\n```\n\n```\n$ npx webpack-dev-server\n```\n\n- add serve in package.json\n\n## Styles\n\n### CSS\n\nhttps://github.com/webpack-contrib/css-loader\nhttps://github.com/webpack-contrib/style-loader\n\n- Create src/assets/css/app.css\n- Add module in webpack.config.js\n\n```\n$ npm install --save-dev css-loader\n$ npm install style-loader --save-dev\n```\n\n### SASS\n\n```\n$ npm install sass-loader --save-dev\n$ npm install node-sass --save-dev\n```\n\n- Create src/assets/sass/app.scss\n- Add module in webpack.config.js\n\n### LESS\n\n```\n$ npm install less-loader --save-dev\n$ npm install less --save-dev\n```\n\n- Create src/assets/less/app.less\n- Add module in webpack.config.js\n\n## BABEL\n\n- Add code in app.js\n\n```\nlet name = \"Clément\";\nconsole.log(name);\n```\n\nhttps://github.com/babel/babel-loader\nhttps://github.com/babel/babel/tree/master/packages/babel-preset-env\nhttps://www.npmjs.com/package/@babel/core\n\n```\n$ npm install babel-loader --save-dev\n$ npm install --save-dev @babel/preset-env\n$ npm install --save-dev @babel/core\n```\n\n- Add module in webpack.config.js\n\n### RC\n\n- Create `babelrc` file\n\n## Production/Development mode\n\n- Create configuration files in `build/` folder\n\n```\n$ npm install webpack-merge --save\n```\n\n## Minify (optional)\n\nhttps://github.com/webpack-contrib/uglifyjs-webpack-plugin\n\n```\n$ npm install uglifyjs-webpack-plugin --save-dev\n```\n\n- Add module in webpack.config.js : ERROR\n\n## Node environment\n\n- add env on production\n- Test env on src/app.js\n\n## Config splitting\n\n- create config files in config/ folder\n\n## Build file\n\n- create build/build.js\n\nhttps://github.com/sindresorhus/ora\nhttps://github.com/chalk/chalk\n\n```\n$ npm install ora\n$ npm install chalk\n```\n\n- update build.js\n\n## Style file\n\n- update webpack.dev.js\n\nhttps://github.com/webpack-contrib/extract-text-webpack-plugin\nhttps://github.com/webpack-contrib/mini-css-extract-plugin\n\n```\n$ npm install --save-dev mini-css-extract-plugin\n```\n\n- update webpack.prod.js\n\n```\n$ npm run create\n```\n\n### Minify\n\nhttps://github.com/NMFR/optimize-css-assets-webpack-plugin\nhttps://github.com/webpack-contrib/terser-webpack-plugin\n\n```\n$ npm install --save-dev optimize-css-assets-webpack-plugin\n$ npm install terser-webpack-plugin --save-dev\n```\n\n## Source mapping\n\n- create src/app/api/index.js\n- update app.js\n\nhttps://webpack.js.org/configuration/devtool/\n\n## Aliases\n\n- update buid/webpack.dev.js\n- update app.js","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcba85%2Fteach-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcba85%2Fteach-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcba85%2Fteach-webpack/lists"}