{"id":18831075,"url":"https://github.com/ssi02014/front_development_environment","last_synced_at":"2025-10-26T09:20:33.812Z","repository":{"id":109515826,"uuid":"482501081","full_name":"ssi02014/front_development_environment","owner":"ssi02014","description":"프론트엔드 개발환경 (Webpack5, Babel, ESLint, Prettier) 🤓","archived":false,"fork":false,"pushed_at":"2022-05-19T10:54:48.000Z","size":2229,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-14T04:14:28.653Z","etag":null,"topics":["babel","eslint","javascript","prettier","react","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/ssi02014.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}},"created_at":"2022-04-17T11:12:55.000Z","updated_at":"2022-08-10T03:03:43.000Z","dependencies_parsed_at":"2023-03-06T04:00:50.043Z","dependency_job_id":null,"html_url":"https://github.com/ssi02014/front_development_environment","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/ssi02014%2Ffront_development_environment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssi02014%2Ffront_development_environment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssi02014%2Ffront_development_environment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssi02014%2Ffront_development_environment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ssi02014","download_url":"https://codeload.github.com/ssi02014/front_development_environment/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248819408,"owners_count":21166477,"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":["babel","eslint","javascript","prettier","react","webpack"],"created_at":"2024-11-08T01:51:44.529Z","updated_at":"2025-10-26T09:20:33.728Z","avatar_url":"https://github.com/ssi02014.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 💻 프론트엔드 개발환경의 이해(webpack, babel, eslint, prettier)\n\n\u003cbr /\u003e\n\n## ✅ README 정리\n\n- [NPM](https://github.com/ssi02014/front_development_environment/tree/master/npm)\n- [웹팩(Webpack) - 기본편](https://github.com/ssi02014/front_development_environment/tree/master/webpack-basic)\n  - Loader\n    1. css-loader\n    2. style-loader\n    3. file-loader (webpack5 이후 assets로 대체)\n    4. url-loader (webpack5 이후 assets로 대체)\n    5. asset-modules\n       \u003cbr /\u003e\n  - Plugin\n    1. BannerPlugin\n    2. DefinePlugin\n    3. EnvironmentPlugin\n    4. HtmlTemplatePlugin\n    5. CleanWebpackPlugin\n    6. MiniCssExtractPlugin\n- [웹팩(Webpack) - 심화편](https://github.com/ssi02014/front_development_environment/tree/master/webpack-deep)\n  - webpack-dev-server\n  - HMR\n- [바벨(Babel)](https://github.com/ssi02014/front_development_environment/tree/master/babel)\n- [ESlint, Prettier](https://github.com/ssi02014/front_development_environment/tree/master/eslint-prettier)\n\n\u003cbr /\u003e\n\n## 👀 React v18 + webpack v5 + babel + eslint + prettier 실습 저장소\n\n- [React v18 + webpack v5 + babel + eslint + prettier 보일러 플레이트](https://github.com/ssi02014/React_Init_Boilerplate)\n\n\u003cbr /\u003e\n\n## 👀 참고 사이트\n\n- [📖 김정환님 블로그](https://jeonghwan-kim.github.io/series/2019/12/09/frontend-dev-env-npm.html)\n\n\u003cbr /\u003e\n\n## 👀 폴더 참고 사항\n\n1. `lecture-example`: 강의 실습\n2. `sample`: 각 폴더 README에 작성된 예제\n3. `npm`: npm 관련 README 정리\n4. `webpack-basic`: webpack 기본편 README 정리\n5. `webpack-deep`: webpack 심화편 README 정리\n6. `babel`: babel README 정리\n7. `eslint-prettier`: eslint, prettier README 정리\n8. `server`: 테스트용 node server 폴더\n\n\u003cbr /\u003e\n\n## 🔖 Webpack, Babel 버전 관련 참고 사항\n\n### 1. asset-modules\n\n- [asset-modules webpack 공식 사이트 참고](https://webpack.js.org/guides/asset-modules)\n- webpack v5 이후부터는 `file-loader`와 `url-loader`는 기본 모듈로 채택되면서 더이상 호환되지 않는다.\n- file-loader와 url-loader는 각각 `asset/resource`, `asset/inline`로 대체되었다.\n- asset/resource와 asset/inline을 조건 상태에따라서 자동으로 선택하는 `asset`도 있다.\n- 자세한 내용은 [웹팩(Webpack) - 기본편](https://github.com/ssi02014/front_development_environment/tree/master/webpack-basic) 참고\n\n```js\n// webpack.config.js asset-modules 예제\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.(png|jpe?g|gif|svg)$/i,\n        type: \"asset\",\n        parser: {\n          dataUrlCondition: {\n            maxSize: 40 * 1024,\n          },\n        },\n      },\n    ],\n  },\n};\n```\n\n\u003cbr /\u003e\n\n### 2. babel-loader와 core-js 버전3 호환\n\n- `core-js` v2는 아래 예제로 제대로 빌드가 진행된다.\n\n```js\n// webpack.config.js babel-loader + core-js v2 예제\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      // ... css-loader\n      // ... asset\n      {\n        test: /\\.js$/,\n        exclude: /node_modules/, // 바벨 로더가 처리하지 않는 폴더 설정\n        loader: \"babel-loader\", // 바벨 로더를 추가한다\n      },\n    ],\n  },\n  plugins: [\n    // ...\n  ],\n```\n\n- 하지만 core-js v3가 설치된 경우에는 위 예제는 제대로 작동하지 않고 아래 예제처럼 작성해야 동작한다. 자세한 내용은 [바벨(Babel) - 기본편](https://github.com/ssi02014/front_development_environment/tree/master/babel) 참고\n\n```js\n// webpack.config.js babel-loader + core-js v3 예제\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      // ... css-loader\n      // ... asset\n      {\n        test: /\\.js$/,\n        exclude: /node_modules/,\n        use: {\n          loader: \"babel-loader\", // 사용할 로더 이름\n          options: { // 로더 옵션\n            presets: [\"@babel/preset-env\"],\n            plugins: [\"@babel/plugin-proposal-class-properties\"],\n          },\n        },\n      },\n    ],\n  },\n  plugins: [\n    // ...\n  ],\n```\n\n\u003cbr /\u003e\n\n### 3. Babel async/await 문법 적용\n\n- 바벨 적용 시에 async/await 문법 오류를 해결하려면 `@babel/plugin-transform-runtime`을 설치하고 셋팅해주면 해결할 수 있다.\n- 기존에는 `@babel/polyfill`을 설치하거나 `regenerator-runtime`을 설치해서 해결했지만 `babel 7.4.0`부터 @babel/polyfill이 deprecated되면서 @babel/plugin-transform-runtime 을 설치하고 해결해야 한다.\n\n```js\n// webpack.config.js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      // ... css-loader\n      // ... asset\n      {\n        test: /\\.js$/,\n        exclude: /node_modules/,\n        use: {\n          loader: \"babel-loader\",\n          options: {\n            presets: [\"@babel/preset-env\"],\n            plugins: [\n              \"@babel/plugin-proposal-class-properties\",\n              \"@babel/plugin-transform-runtime\"\n            ],\n          },\n        },\n      },\n    ],\n  },\n  plugins: [\n    // ...\n  ],\n```\n\n\u003cbr /\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fssi02014%2Ffront_development_environment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fssi02014%2Ffront_development_environment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fssi02014%2Ffront_development_environment/lists"}