문서의 임의 삭제는 제재 대상으로, 문서를 삭제하려면 삭제 토론을 진행해야 합니다. 문서 보기문서 삭제토론 webpack (문단 편집) === 설정 요소 === '''Entry''' {{{#!syntax javascript module.exports = { entry: './path/to/my/entry/file.js', }; }}} 엔트리 포인트는 webpack이 빌드될 때 최초의 진입점이자, 의존성 그래프의 시작점이라고 생각하면 된다. 의존성을 생각할 때, 페이지가 여럿으로 나뉜다면 다음과 같이 여러 개의 엔트리 포인트를 설정할 수 있다. {{{#!syntax javascript entry: { APage: './src/AScript.js', BPage: './src/BScript.js', CPage: './src/CScript.js' }; }}} '''Output''' {{{#!syntax javascript const path = require('path'); module.exports = { entry: './path/to/my/entry/file.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'my-first-webpack.bundle.js', }, }; }}} 아웃풋은 웹팩을 사용하고 나서 나오는 결과물에 대한 설정이다. path는 결과물의 위치, filename 결과물의 파일 이름을 설정하는 요소이다. 지금 설정으로 폴더 이름은 '''dist''', 번들 파일 이름은 '''my-first-webpack.bundle.js'''이다. 이 번들 파일을 script로 연결시키면 된다. 그 외의 Output의 결과 파일의 charset, 파일이름 템플릿 설정, chunk 설정 요소는 공식문서를 참조해주세요. [[https://webpack.js.org/configuration/output/|공식문서]] '''Loaders''' {{{#!syntax javascript const path = require('path'); module.exports = { output: { filename: 'my-first-webpack.bundle.js', }, module: { rules: [{ test: /\.txt$/, use: 'raw-loader' }], }, }; }}} 로더는 자바스크립트 파일이 아닌 애플리케이션의 요소들을 번들링할 때, 이것들을 변환하는데 있어서 적용할 일종의 변환 규칙들이다. 여러 타입의 파일을 처리하고, 애플리케이션에서 사용하게 변환하고, 의존성 그래프에 추가한다. 예시에서 '''test''' 요소는 규칙이 적용될 파일을 가르키는데 예시에서는 '''.txt''' 파일에 적용되는 것이다. 그 적용되는 규칙은 '''raw-loader'''이다. 로더를 불러오는 방법으로는 3가지가 있다. * 설정파일 (추천하는 방법) * 인라인 * CLI '''Plugins''' {{{#!syntax javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm const webpack = require('webpack'); //to access built-in plugins module.exports = { module: { rules: [{ test: /\.txt$/, use: 'raw-loader' }], }, plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })], }; }}} 플러그인은 webpack을 위한 확장 기능입니다. 넓게 보면 번들 최적화, 에셋 관리, 환경요소 주입 등의 일들에 있어서 도움을 준다. 플러그인를 사용하는 방법으로는 2가지가 있다. * 설정파일 (추천하는 방법) * Node API '''Mode''' {{{#!syntax javascript module.exports = { mode: 'production', }; }}} 모드는 빌드때에 맞는 상황에 맞추어서 최적화 요소를 제공해주는 webpack 4 버전에 생긴 기능입니다. 디폴트는 '''production'''이다. 모드 요소에 의한 설정값들에 대해서는 공식문서를 참조해주세요. [[https://webpack.js.org/configuration/mode/|공식문서]] '''Browser Compatibility''' 다양한 브라우저을 위해서 ES5 문법 지원을 도와주는 요소입니다. ([[Internet Explorer/버전 #s-1.8|IE8]] 버전과 그보다 낮은 버전들은 지원하지 않습니다.)저장 버튼을 클릭하면 당신이 기여한 내용을 CC-BY-NC-SA 2.0 KR으로 배포하고,기여한 문서에 대한 하이퍼링크나 URL을 이용하여 저작자 표시를 하는 것으로 충분하다는 데 동의하는 것입니다.이 동의는 철회할 수 없습니다.캡챠저장미리보기