├── Readme.md ├── 로더.md ├── 로더 └── css-loader.md ├── 모듈.md ├── 모드.md ├── 아웃풋.md ├── 엔트리포인트.md ├── 컨트리뷰트 └── 로더작성법.md └── 플러그인.md /Readme.md: -------------------------------------------------------------------------------- 1 | # 개요 2 | 3 | 웹팩은 모던 js앱을 위한 정적 모듈 번들러죠. 4 | 5 | 웹팩이 앱을 처리할 땐, 프로젝트에 필요한 모든 모듈을 매핑하고 한 개 이상의 번들을 생성하는 의존성 그래프를 내부적으로 만듭니다. 6 | 7 | > 자바스크립트 모듈과 웹팩 모듈에 대해 더 알고 싶다면 여기를 8 | 9 | 4.0.0부터는 프로젝트를 번들하기 위한 설정 파일이 필요없지만, 요구사항에 더 잘 부합하도록 상세히 설정할 수도 있습니다. 10 | 11 | 핵심 개념만 이해하면 시작할 수 있습니다. 12 | 13 | * 엔트리(Entry) 14 | * 아웃풋(Output) 15 | * 로더(Loaders) 16 | * 플러그인(Plugins) 17 | * 모드(Mode) 18 | * 브라우저호환성(Browser Compatibility) 19 | 20 | 이 문서는 위 개념에 대한 이해와 개념에 대한 구체적인 사례 및 링크를 제공합니다. 21 | 하지만 모듈을 번들하고 내부에서 어떻게 작동하는가에 대한 기초 개념이 궁금하면 아래 링크를 참고하세요. 22 | 23 | * 앱 수동 빌드 24 | * 간단한 모듈 번들러 라이브코딩 25 | * 간단한 모듈 번들러의 상세한 설명 26 | 27 | ## 엔트리(Entry) 28 | 진입점은 웹팩 모듈이 쓰게 될 내부의 의존성 그래프를 만들기 위해 필요합니다. 웹팩은 진입점을 통해 직간접적으로 의존하는 모듈과 라이브러리를 파악합니다. 29 | 30 | 기본값은 ./src/index.js고 webpack.config.js 파일로 entry를 지정하여 다른 진입점을 구성할 수 있습니다. 진입점을 여러 개로 구성하는 것도 가능합니다. 31 | 32 | > 역주: 진입점은 c나 java의 main함수처럼 최초 시스템이 부르게 되는 함수(여기서는 파일)을 말합니다. 웹팩은 이 파일로부터 차근차근 의존하는 모듈과 라이브러리를 검색해가며 파악합니다. 33 | 34 | ```js 35 | module.exports = { 36 | entry: './path/to/my/entry/file.js' 37 | }; 38 | ``` 39 | 40 | > 더 자세한 정보는 엔트리포인트로 41 | 42 | ## 아웃풋(Output) 43 | 아웃풋은 웹팩이 생성한 번들의 저장할 위치와 이름을 알려줍니다. 기본값은 ./dist/main.js고 다른 파일이 생성되는 경우는 ./dist폴더입니다. 44 | 45 | webpack.config.js 파일로 output를 별도로 지정할 수 있습니다. 46 | 47 | ```js 48 | const path = require('path'); 49 | 50 | module.exports = { 51 | entry: './path/to/my/entry/file.js', 52 | output: { 53 | path: path.resolve(__dirname, 'dist'), 54 | filename: 'my-first-webpack.bundle.js' 55 | } 56 | }; 57 | ``` 58 | 59 | 위 코드에서 output.filename과 output.path을 이용해 번들의 위치와 이름을 지정합니다(path는 nodejs의 모듈입니다) 60 | 61 | > 역주: output의 경로는 반드시 완전한 절대 경로여야 합니다. 62 | 63 | > 더 자세한 정보는 아웃풋으로 64 | 65 | ## 로더(Loaders) 66 | 웹팩은 오직 js와 json만 이해할 수 있습니다. 로더를 사용하면 다른 형식의 파일을 의존성 그래프에 추가할 수 있게 변환하여 앱에서 사용할 수 있게 처리합니다. 67 | 68 | > 어떤 모듈(예를 들면 .css파일)은 웹팩에서 임포트하는 사양이므로 다른 번들러나 태스크 러너에서 지원 안될 수도 있습니다. 로더는 보다 정확한 의존성 그래프를 만들도록 해줍니다. 69 | 70 | 크게 보면 웹팩 설정 상 로더는 두 가지 속성을 갖습니다. 71 | 72 | * test속성은 변환할 파일을 식별합니다. 73 | * use속성은 변형을 수행하기 위해 사용할 로더를 가리킵니다. 74 | 75 | webpack.config.js 76 | 77 | ```js 78 | const path = require('path'); 79 | 80 | module.exports = { 81 | output: { 82 | filename: 'my-first-webpack.bundle.js' 83 | }, 84 | module: { 85 | rules: [ 86 | { test: /\.txt$/, use: 'raw-loader' } 87 | ] 88 | } 89 | }; 90 | ``` 91 | 92 | 위 설정에서 단일 모듈에 test, use속성을 갖는 rules속성을 정의했습니다. 이는 웹팩에게 다음과 같이 컴파일하라고 지시한 것입니다. 93 | 94 | "require()나 import 문에 '.txt'를 포함하는 경로가 발견되면 번들에 추가하기 전에 먼저 raw-loader를 사용해 변형해라" 95 | 96 | > 웹팩에서 rules를 정의할 때는 rules가 아니라 module.rules에 정의합니다. 잘못된 키로 지정하면 웹팩은 경고합니다. 97 | 98 | > test속성에서 정규식 매칭에는 따옴표를 쓰지 않습니다. 직접 따옴표로 지정하는 경우와 정규식으로 지정하는 경우의 차이에 유의하세요. 99 | 100 | > 더 자세한 정보는 로더로 101 | 102 | ## 플러그인(Plugins) 103 | 104 | 로더는 특정 타입의 모듈을 변환하는데 사용되지만 플러그인을 사용하면 번들의 최적화, 에섹관리 및 환경변수 주입과 같은 광범위한 작업을 수행할 수 있죠. 105 | 106 | 플러그인의 인터페이스와 사용법을 익혀 웹팩의 능력을 확장하세요. 107 | 108 | 플러그인을 사용하려면 require()로 플러그인을 가져와 plugins 배열에 추가해야 합니다. 대부분의 플러그인은 옵션으로 커스터마이즈가 가능합니다. 109 | 다른 목적의 설정에서 플러그인이 여러번 사용된다면 new로 플러그인의 인스턴스를 만들어야 합니다. 110 | 111 | webpack.config.js 112 | 113 | ```js 114 | const HtmlWebpackPlugin = require('html-webpack-plugin'); //npm으로 인스톨 115 | const webpack = require('webpack'); //빌트인 플러그인에 접근하기 위해 로딩 116 | 117 | module.exports = { 118 | module: { 119 | rules: [ 120 | { test: /\.txt$/, use: 'raw-loader' } 121 | ] 122 | }, 123 | plugins: [ 124 | new HtmlWebpackPlugin({template: './src/index.html'}) 125 | ] 126 | }; 127 | ``` 128 | 위 설정에서 html-webpack-plugin은 모든 생성된 번들에 주입되어 앱에 대한 html파일을 생성합니다. 129 | 130 | > webpack이 제공하는 많은 플러그인이 있으니 플러그인목록을 확인하세요. 131 | 132 | > 더 자세한 정보는 플러그인으로 133 | 134 | ## 모드(Mode) 135 | mode속성에 "development", "production", "none" 중 하나를 설정하면 각 환경에 맞춘 웹팩의 내장 최적화가 설정됩니다. 136 | 기본 값은 "production"입니다. 137 | 138 | > 더 자세한 정보는 모드로 139 | 140 | ## 브라우저호환성(Browser Compatibility) 141 | 142 | 웹팩은 es5호환 브라우저를 지원합니다. 웹팩은 import(), require.ensure()를 위해 Promise가 필요합니다. 구형브라우저라면 이에 대한 polyfill이 필요합니다. 143 | 144 | ## 과제 145 | 146 | 위에서 언급된 기본값의 조합으로 webpack.config.js의 전체 코드를 작성하시오. 147 | -------------------------------------------------------------------------------- /로더.md: -------------------------------------------------------------------------------- 1 | # 로더(Loader) 2 | 3 | 로더란 모듈의 소스 코드에 적용되는 변형도구입니다. import나 load시점에 파일을 전처리할 수 있게 하죠. 다른 빌드 도구에서 task라 불리는 것과 비슷하며 빌드 단계를 처리할 강력한 방법을 제공합니다. 로더는 다른 언어(typescript같은)에서 js로 변환하거나 dataURLs를 이용해 인라인이미지를 변환할 수도 있습니다. 로더를 이용하면 js모듈에서 직접 css파일을 가져오는 것도 가능하죠. 4 | 5 | ## 예제 6 | 7 | 다음은 로더로 css파일을 로딩하거나 typescript를 js로 변환하는 예제입니다. 이런 작업을 하기 앞서 필요한 로더를 설치합니다. 8 | 9 | ``` 10 | npm install --save-dev css-loader 11 | npm install --save-dev ts-loader 12 | ``` 13 | 14 | 이제 웹팩에게 모든 .css파일을 css-loader로 처리하고, .ts파일은 ts-loader가 처리하게 지시합니다. 15 | 16 | webpack.config.js 17 | ```js 18 | module.exports = { 19 | module: { 20 | rules: [ 21 | { test: /\.css$/, use: 'css-loader' }, 22 | { test: /\.ts$/, use: 'ts-loader' } 23 | ] 24 | } 25 | }; 26 | ``` 27 | 28 | * css-loader 29 | * ts-loader 30 | 31 | ## 로더 사용하기 32 | 33 | 앱에서 로더를 사용하는데는 3가지 방법이 있습니다. 34 | 35 | * 설정파일이용(추천) : webpack.config.js 파일에서 설정합니다. 36 | * 인라인 : 각 파일에서 import 문으로 처리합니다. 37 | * CLI : 프롬프트 명령을 통해 처리합니다. 38 | 39 | ### 설정파일이용 40 | module.rules키를 이용하면 설정 파일 내에서 여러 로더를 지정할 수 있죠. 로더를 정의하는 간단한 방법이자 코드를 깨끗하게 유지하는데 도움을 주기도 합니다. 또한 한 눈에 전체 로더를 파악할 수 있습니다. 41 | 42 | 로더는 우에서 좌로 평가, 실행됩니다. 아래 예제는 sass-loader로 시작해 css-loader로 진행되다가 style-loader로 끝납니다. 더 자세한 내용은 하단의 로더사양을 참고하세요. 43 | 44 | ```js 45 | module.exports = { 46 | module: { 47 | rules: [ 48 | { 49 | test: /\.css$/, 50 | use: [ 51 | { loader: 'style-loader' }, 52 | { 53 | loader: 'css-loader', 54 | options: { 55 | modules: true 56 | } 57 | }, 58 | { loader: 'sass-loader' } 59 | ] 60 | } 61 | ] 62 | } 63 | }; 64 | ``` 65 | 66 | > 역주 : 뭐가 우에서 좌인지..use배열의 마지막 항목부터 실행된다고 생각하시면 될 듯합니다. 67 | 68 | ### 인라인 69 | 각 파일에 import문으로 로더를 지정할 수 있습니다만 되도록이면 리소스와 로더를 분리하는 편이 낫습니다. 각 부분은 현재 폴더의 상대 경로로 처리됩니다. 70 | 71 | ```js 72 | import Styles from 'style-loader!css-loader?modules!./styles.css'; 73 | ``` 74 | 75 | !표시를 전체 규칙 앞에 붙이면 설정에 있는 모든 로더를 덮어쓸 수 있습니다. 76 | 77 | 옵션은 쿼리문자열로 전달할 수 있습니다. 78 | * ?key=value&key=value : form스타일 또는 79 | * {"key":"value"} : json스타일로 전달할 수 있습니다. 80 | 81 | > 가능하면 설정파일을 사용하세요. 소스 코드가 지저분해지고 디버깅이 어려워집니다. 82 | 83 | ### CLI 84 | 85 | CLI로도 로더를 적용할 수 있습니다. 86 | 87 | ``` 88 | webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader' 89 | ``` 90 | 91 | 위 예제는 .jade를 jade-loader에 .css를 style-loader 및 css-loader에 적용합니다. 92 | 93 | ## 로더 사양 94 | * 로더는 체이닝됩니다. 체인 상의 각 로더는 변환된 자원을 다음 체인에게 줍니다. 또한 체인은 역순으로 실행됩니다. 결국 웹팩은 최종적으로 체인의 마지막에 javascript를 반환할 것을 기대합니다. 95 | * 로더는 동기/비동기적으로 실행될 수 있습니다. 96 | * 로더는 nodejs로 실행되며 nodejs에서 가능한 것이라면 뭐든 할 수 있습니다. 97 | * 로더는 option객체로 구성할 수 있습니다(옵션인자로 옵션을 설정하는 것은 여전히 지원되지만 더이상 지원하지 않습니다) 98 | * 일반적인 모듈은 package.json에 loader필드를 이용해 main에 추가로 로더를 export할 수 있습니다. 99 | * 플러그인은 로더가 더 많은 일을 할 수 있게 해줍니다. 100 | * 로더는 파일을 추가로 만들어낼 수 있습니다. 101 | 102 | 로더는 전처리를 통해 js환경에서 더 많은 기능을 제공하여 압축, 패키징, 언어 변환 같은 기능을 포함할 수 있게 합니다. 103 | 104 | ## 로더 해소 105 | 로더는 표준 모듈과 동일하게 얻습니다. 대부분 로더는 모듈 경로로부터 로딩됩니다(npm install, node_modules) 106 | 107 | 로더 모듈은 함수를 출력하는 nodejs호환 js로 작성합니다. 보통 npm으로 관리되지만 사용자 정의 로더가 앱 내의 파일로 존재할 수도 있습니다. 108 | 로더는 일반적으로 xx-loader(json-loader처럼)로 명명됩니다. 109 | 110 | > 자세한 내용은 로더작성법 111 | 112 | 113 | -------------------------------------------------------------------------------- /로더/css-loader.md: -------------------------------------------------------------------------------- 1 | # css-loader 2 | -------------------------------------------------------------------------------- /모듈.md: -------------------------------------------------------------------------------- 1 | # 모듈 2 | -------------------------------------------------------------------------------- /모드.md: -------------------------------------------------------------------------------- 1 | # 모드 2 | -------------------------------------------------------------------------------- /아웃풋.md: -------------------------------------------------------------------------------- 1 | # 2 | -------------------------------------------------------------------------------- /엔트리포인트.md: -------------------------------------------------------------------------------- 1 | # 2 | -------------------------------------------------------------------------------- /컨트리뷰트/로더작성법.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /플러그인.md: -------------------------------------------------------------------------------- 1 | # 2 | --------------------------------------------------------------------------------