wiki:javascript:webpack
차이
문서의 선택한 두 판 사이의 차이를 보여줍니다.
| 양쪽 이전 판 이전 판 다음 판 | 이전 판 | ||
|
wiki:javascript:webpack [2020/08/19 09:28] dhan |
wiki:javascript:webpack [2023/01/13 18:44] (현재) |
||
|---|---|---|---|
| 줄 8: | 줄 8: | ||
| <WRAP clear/> | <WRAP clear/> | ||
| 웹팩은 기본적으로 필요한 자원은 미리 로딩하는게 아니라 그 때 그 때 요청하자는 철학을 갖고 있습니다. | 웹팩은 기본적으로 필요한 자원은 미리 로딩하는게 아니라 그 때 그 때 요청하자는 철학을 갖고 있습니다. | ||
| - | |||
| - | |||
| ===== 사용해야 하는 이유 ===== | ===== 사용해야 하는 이유 ===== | ||
| - | |||
| ===== 장단점 ===== | ===== 장단점 ===== | ||
| 줄 23: | 줄 20: | ||
| ===== Term ===== | ===== Term ===== | ||
| - | Bundler(번들) \\ | + | bundler(번들) \\ |
| - | 묶음 | + | 묶음 |
| \\ | \\ | ||
| - | import | + | entry \\ |
| \\ | \\ | ||
| export \\ | export \\ | ||
| + | \\ | ||
| + | import \\ | ||
| \\ | \\ | ||
| 줄 40: | 줄 39: | ||
| | | ||
| path: path.resolve(__dirname, | path: path.resolve(__dirname, | ||
| - | | + | |
| } | } | ||
| } | } | ||
| 줄 47: | 줄 46: | ||
| > 실행2: npx webpack (설정파일이 webpack.config.js일 경우 생략 가능) | > 실행2: npx webpack (설정파일이 webpack.config.js일 경우 생략 가능) | ||
| - | ====== Install | + | ===== Install ===== |
| 1. Node.js 설치 \\ | 1. Node.js 설치 \\ | ||
| 2. npm init \\ | 2. npm init \\ | ||
| - | 3. npm install -D webpack webpack-cli \\ | + | 3. npm install -D webpack webpack-cli |
| 4. npx webpack --entry source/ | 4. npx webpack --entry source/ | ||
| + | ===== css ===== | ||
| + | Loader을 이용하여 css bundle [[https:// | ||
| + | <code bash> | ||
| + | npm install --save-dev style-loader css-loader | ||
| + | </ | ||
| + | \\ | ||
| + | <code javascript> | ||
| + | const path = require(' | ||
| + | module.exports = { | ||
| + | mode: " | ||
| + | | ||
| + | | ||
| + | path: path.resolve(__dirname, | ||
| + | | ||
| + | }, | ||
| + | | ||
| + | | ||
| + | { | ||
| + | | ||
| + | use:[ // 뒤부터 먼저 실행됨(chaining 체이닝) | ||
| + | ' | ||
| + | ' | ||
| + | ] | ||
| + | } | ||
| + | ] | ||
| + | } | ||
| + | } | ||
| + | </ | ||
| + | > 실행: npx webpack | ||
| + | \\ | ||
| + | ===== Output ===== | ||
| + | <code javascript> | ||
| + | const path = require(' | ||
| + | module.exports = { | ||
| + | mode: " | ||
| + | | ||
| + | | ||
| + | path: path.resolve(__dirname, | ||
| + | | ||
| + | }, | ||
| + | | ||
| + | | ||
| + | { | ||
| + | | ||
| + | use:[ // 뒤부터 먼저 실행됨(chaining 체이닝) | ||
| + | ' | ||
| + | ' | ||
| + | ] | ||
| + | } | ||
| + | ] | ||
| + | } | ||
| + | } | ||
| + | </ | ||
| + | \\ | ||
| + | ===== Plugin ===== | ||
| + | |||
| + | npm install --save-dev html-webpack-plugin | ||
| ===== Ref ===== | ===== Ref ===== | ||
/volume1/web/dokuwiki/data/attic/wiki/javascript/webpack.1597796922.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
