{"id":21493270,"url":"https://github.com/clzzi/webpack-study","last_synced_at":"2026-04-27T18:32:36.524Z","repository":{"id":129723137,"uuid":"388334833","full_name":"Clzzi/WEBPACK-Study","owner":"Clzzi","description":"FastCampus의 WEBPACK강의 보고 웹팩에 대한 공부를하고 알게된점, 개념등을 정리해놓은 공간입니다.","archived":false,"fork":false,"pushed_at":"2021-07-22T13:06:22.000Z","size":998,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-14T03:05:33.326Z","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/Clzzi.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":"2021-07-22T05:12:02.000Z","updated_at":"2021-07-22T13:08:00.000Z","dependencies_parsed_at":"2023-04-27T20:47:51.238Z","dependency_job_id":null,"html_url":"https://github.com/Clzzi/WEBPACK-Study","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Clzzi/WEBPACK-Study","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clzzi%2FWEBPACK-Study","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clzzi%2FWEBPACK-Study/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clzzi%2FWEBPACK-Study/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clzzi%2FWEBPACK-Study/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Clzzi","download_url":"https://codeload.github.com/Clzzi/WEBPACK-Study/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clzzi%2FWEBPACK-Study/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32349528,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-27T17:12:42.749Z","status":"ssl_error","status_checked_at":"2026-04-27T17:12:41.658Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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-23T15:41:11.956Z","updated_at":"2026-04-27T18:32:36.505Z","avatar_url":"https://github.com/Clzzi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## WEBPACK STUDY - FastCampus\n\n\u003e 해당 ReadMe는 FastCampus를 보면서 WEBPACK 공부를하고 기록해놓은 파일입니다\n\n---\n\n### WEBPACK이란 무엇인가\n- 웹팩은 **모듈 번들러**이다.\n- 웹팩은 **상호 의존성**이 있는 **모듈**들을 사용해 그 모듈들과 같은 역할을 하는 **정적 에셋**들을 생성해낸다.\n![웹팩 번들러 이미지](https://user-images.githubusercontent.com/62810965/126642886-89e3ed75-f3f0-41a5-972f-12401e8ff611.png)\n\n### WEBPACK을 사용하는 이유\n\n- 번들러를 사용하면 여러개의 파일들을 한 개 이상의 파일로 합칠 수 있기때문에 동시 연결 제한이 있는 **http 1.1 프로토콜에서는 효율적**이다.\n- **전역 스코프** 오염 걱정 없이 **모듈(파일) 단위 스코프**를 사용해서 개발할 수 있게 해준다\n- minify, uglify, auto-prefix, 변경된 파일만 filehash 변경 등 다양한 태스크들을 지정한 **순서대로** 빌드타임에 실행시켜준다.\n- webpack-dev-server를 이용해 손쉽게 **hmr(hot module replacement)** 환경에서 개발할 수 있게해준다\n\n### WEBPACK의 장점\n\n- 다른 모듈 번들러에 비해 성능이 우수함\n- **Chunk단위**로 의존성 트리를 동기적, 비동기적으로 분활할 수 있음\n- **Loader**가 존재해서 다른 리소스를 순수 JS로 변환하고 모든 리소스에 대한 모듈을 구성함\n- **3rd-party-lib**에 대해 **모듈로 통합하는 기능**을 제공함\n- Module bundler의 **대부분의 기능**을 유저가 **커스터마이즈** 할 수 있음\n- 다양한 플러그인이 있음\n\n### WEBPACK의 단점\n\n- 러닝커드가 높음\n- document문서가 많이 착하진 않음\n- **에러 핸들링?** 오류와 조우했을 때 골머리 앓는경우가 많음\n\n### WEBPACK의 동작방식은 어떻게 되는걸까?\n\n1. 각 기능 단위별로 module을 정의함\n2. module을 로딩함\n3. module로 만들어진 파일들을 웹브라우저에서 사용 가능하도록 컴파일(bundling, 번들링) 함, \n이때, module을 웹브라우저에서 사용할 수 있도록 컴파일을하는 역할을 WEBPACK이 하는것\n\n\u003e WEBPACK에서의 컴파일이란, 엔트리 파일을 시작으로 의존 관계에 있는 모듈을 엮어서 하나의 번들 파일을 만드는 작업을 말한다.\n\n![모듈 엔트리 번들파일](https://user-images.githubusercontent.com/62810965/126643228-55ec092f-767b-4ea1-9b5d-21024ddc213c.png)\n\n---\n\n### ENTRY , OUTPUT\n\n- **ENTRY**\n    - 모듈의 의존 관계를 해석하기 위한 시작점을 설정함\n    - 복잡한 의존성에 얽혀있는 기존 파일들 중 어떤 파일을 시작점으로 잡고 가야할지 WEBPACK에게 알려주는 역할\n    - entry의 기본값은 ./src/index.js이며, webpack.config.js에 entry 프로퍼티를 추가해서 다른 여러 시작점을 지정할 수 있다.\n- **OUTPUT**\n    - WEBPACK이 생성하는 번들 파일에 대한 정보를 설정\n    - 생성한 번들을 내보낼 경로나 내보낼 번들의 파일명을 지정하기 위해 사용\n    - 기본적으로 main file의 경우 ./dist/main.js 경로에 생성되며, 다른 파일들은 ./dist 폴더안에 생성됩니다.\n\n---\n\n### Mode , Loader , Plugin\n\n- **Mode**\n    - Package.json은 어플리케이션 내부에 직접 포함되는 모듈 및 개발 과정에 필요한 모듈로 구분됨\n    - 이런 두가지 모듈종류를 구분하기 위해서 package.json에 dependencies와 devDependencies가 있는거임\n    - Mode는 **development, production, none** 으로 지정할 수 있으며, 기본값은 **production** 임\n    - Mode 옵션을 사용하기 위해선, webpack.config.js에 mode 프로퍼티를 설정 해주거나, webpack을 실행할 때 cli상에서 --mode argument를 전달해주면 됨\n- **Loader**\n    - 웹팩의 의존성 그래프를 완성시키는 과정에서 의존관계를 가지는 다양한 모듈을 입력받아 처리하는 역할\n    - WEBPACK은 오직 JS와 JSON 파일만 이해할 수 있다. 그래서 다른 타입의 파일들을 처리할려면 Loader를 사용해야함\n    - Loaders는 두가지 프로퍼티를 가지고 있다.\n        - **test**는 어느 파일이 변환되어야하는지 나타낸다.\n        - **use**는 해당 파일을 변환하기 위해서 어떤 loader를 사용해야하는지 나타낸다.\n\n    ```jsx\n    // loader의 기본형식\n    module.exports = {\n    \tmodule: {\n    \t\trules: [loader1, loader2]\n    \t}\n    }\n\n    loader1과 loader2, 즉배열형태로 들어가는 인자들은 대게 객체 형식으로 들어가는것 같다.\n\n    module.exports = {\n      entry: \"./index.js\",\n      output: {\n        filename: \"bundle.js\",\n        path: path.resolve(__dirname, \"dist\"),\n      },\n      mode: \"none\",\n      module: {\n        rules: [\n          {\n            test: /\\.css$/i, // .css를 식별하는 정규 표현식\n            use: [\n              {\n                loader: \"style-loader\",\n                options: {\n                  injectType: \"singletonStyleTag\",\n                },\n              },\n              {\n                loader: \"css-loader\",\n                options: {\n                  modules: true,\n                },\n              },\n            ],\n          },\n        ],\n      },\n    };\n    ```\n\n- **Plugin**\n    - 웹팩이 동작하는 전체적인 과정에 개입할 수 있어 전반적인 역할을 해줌, 다양한 일을 함\n    - 번들 최적화, asset 관리, 환경 변수 주입과 같은 번들된 결과물에 대하여 광범위한 작업을 수행하기 위해 사용함\n    - **commonJs방식(require())** 으로 플러그인을 가져온 뒤 해당 플러그인을 plugins 배열에 추가\n    - 플러그인을 호출 할 때 **new 연산자**와 함께 호출해서 **인스턴스 형태**로 만들어줘야합니다.\n\n    ```jsx\n    // plugin 기본 형식\n    module.exports = {\n    \tplugins: [new Plugin({ ...options }), ...]\n    }\n    ```\n    \n---\n\n\u003cdetails\u003e\n\u003csummary\u003e강의를 보고 적은 코드\u003c/summary\u003e\n\n  ### webpack.common.js\n\n```jsx\nconst path = require(\"path\");\nconst HtmlWebpackPlugin = require(\"html-webpack-plugin\");\nconst { CleanWebpackPlugin } = require(\"clean-webpack-plugin\");\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\nconst webpack = require(\"webpack\");\n\nconst isProduction = process.env.NODE_ENV === \"PRODUCTION\";\n\nmodule.exports = {\n  entry: \"./src/index.js\",\n  output: {\n    filename: `[name].[chunkhash].js`, // hash contenthash chunkhash\n    path: path.resolve(__dirname, \"dist\"),\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.s?css$/,\n        oneOf: [\n          {\n            test: /\\.module\\.s?css$/,\n            use: [\n              {\n                loader: MiniCssExtractPlugin.loader,\n              },\n              {\n                loader: \"css-loader\",\n                options: {\n                  modules: true,\n                },\n              },\n              \"sass-loader\",\n            ],\n          },\n          {\n            use: [MiniCssExtractPlugin.loader, \"css-loader\", \"sass-loader\"],\n          },\n        ],\n      },\n      {\n        test: /\\.{png|jpe?g|gif}$/i,\n        use: [\n          {\n            loader: \"file-loader\",\n            options: {\n              name() {\n                if (!isProduction) {\n                  return \"[path][name].[ext]\";\n                }\n                return \"[contenthash].[ext]\";\n              },\n              publicPath: \"assets/\",\n              outputPath: \"assets/\",\n            },\n          },\n        ],\n      },\n      {\n        test: /\\.svg$/,\n        use: [\n          {\n            loader: \"url-loader\",\n            options: {\n              limit: 8192,\n            },\n          },\n        ],\n      },\n      {\n        test: /\\.hbs$/i,\n        use: [\"handlebars-loader\"],\n      },\n      {\n        test: /.js/,\n        exclude: /node_modules/,\n        loader: \"babel-loader\",\n      },\n    ],\n  },\n  plugins: [\n    new HtmlWebpackPlugin({\n      title: \"Webpack\",\n      template: \"./template.hbs\",\n      meta: {\n        viewport: \"width=device-width, initial-scale=1.0\",\n      },\n      minify: isProduction\n        ? {\n            collapseWhitespace: true,\n            useShortDoctype: true,\n            removeScriptTypeAttributes: true,\n          }\n        : false,\n    }),\n    new MiniCssExtractPlugin({ filename: \"[contenthash].css\" }),\n    new CleanWebpackPlugin(),\n    new webpack.DefinePlugin({\n      IS_PRODUCTION: isProduction,\n    }),\n  ],\n};\n```\n\n### package.json\n\n```jsx\n{\n  \"name\": \"WEBPACK-PRACTICE\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"start\": \"cross-env NODE_ENV=DEVELOPMENT webpack server --config webpack.dev.js\",\n    \"dev\": \"cross-env NODE_ENV=DEVELOPMENT webpack --config webpack.dev.js\",\n    \"build\": \"cross-env NODE_ENV=PRODUCTION webpack --config webpack.production.js\"\n  },\n  \"keywords\": [],\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"devDependencies\": {\n    \"@babel/cli\": \"^7.14.8\",\n    \"@babel/core\": \"^7.14.8\",\n    \"@babel/polyfill\": \"^7.12.1\",\n    \"@babel/preset-env\": \"^7.14.8\",\n    \"babel-loader\": \"^8.2.2\",\n    \"clean-webpack-plugin\": \"^4.0.0-alpha.0\",\n    \"cross-env\": \"^7.0.3\",\n    \"css-loader\": \"^6.2.0\",\n    \"cssnano\": \"^5.0.7\",\n    \"file-loader\": \"^6.2.0\",\n    \"handlebars\": \"^4.7.7\",\n    \"handlebars-loader\": \"^1.7.1\",\n    \"html-webpack-plugin\": \"^5.3.2\",\n    \"mini-css-extract-plugin\": \"^2.1.0\",\n    \"node-sass\": \"^6.0.1\",\n    \"optimize-css-assets-webpack-plugin\": \"^6.0.1\",\n    \"sass-loader\": \"^12.1.0\",\n    \"style-loader\": \"^3.2.1\",\n    \"stylelint\": \"^13.13.1\",\n    \"stylelint-config-standard\": \"^22.0.0\",\n    \"stylelint-scss\": \"^3.20.1\",\n    \"stylelint-webpack-plugin\": \"^3.0.1\",\n    \"terser-webpack-plugin\": \"^5.1.4\",\n    \"url-loader\": \"^4.1.1\",\n    \"webpack\": \"^5.45.1\",\n    \"webpack-cli\": \"^4.7.2\",\n    \"webpack-dev-server\": \"^3.11.2\",\n    \"webpack-merge\": \"^5.8.0\"\n  },\n  \"dependencies\": {\n    \"jquery\": \"^3.6.0\",\n    \"normalize.css\": \"^8.0.1\"\n  },\n  \"browserslist\": [\n    \"last 2 versions\",\n    \"IE 10\",\n    \"Firefox \u003e 20\"\n  ]\n}\n```\n\n### webpack.dev.js\n\n```jsx\nconst merge = require(\"webpack-merge\");\nconst common = require(\"./webpack.common\");\nconst StyleLintPlugin = require(\"stylelint-webpack-plugin\")\n\nconst config = {\n  mode: \"development\",\n  devServer: {\n    open: false,\n    overlay: true,\n    port: 6969,\n    historyApiFallback: {\n      rewrites: [\n        {\n          from: /^\\/subpage$/,\n          to: \"subpage.html\",\n        },\n        {\n          from: /./,\n          to: \"404.html\",\n        },\n      ],\n    },\n  },\n  plugins: [new StyleLintPlugin()],\n};\n\nmodule.exports = merge.merge(common, config);\n```\n\u003c/details\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclzzi%2Fwebpack-study","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclzzi%2Fwebpack-study","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclzzi%2Fwebpack-study/lists"}