초보자를위한 Webpack 소개

Webpack이란 무엇입니까?

Webpack은 JavaScript 모듈을 컴파일 할 수있는 도구입니다. 모듈 번 들러라고도합니다.

많은 파일이 주어지면 앱을 실행하는 단일 파일 또는 몇 개의 파일이 생성됩니다.

많은 작업을 수행 할 수 있습니다.

  • 자원을 묶는 데 도움이됩니다.
  • 변경 사항을 감시하고 작업을 다시 실행합니다.
  • ES5로 Babel 변환을 실행할 수 있으므로 브라우저 지원에 대한 걱정없이 최신 JavaScript 기능을 사용할 수 있습니다.
  • CoffeeScript를 JavaScript로 변환 할 수 있습니다
  • 인라인 이미지를 데이터 URI로 변환 할 수 있습니다.
  • CSS 파일에 require ()를 사용할 수 있습니다.
  • 개발 웹 서버를 실행할 수 있습니다.
  • 핫 모듈 교체를 처리 할 수 ​​있습니다.
  • 첫 페이지 적중에 큰 JS 파일을로드하지 않도록 출력 파일을 여러 파일로 분할 할 수 있습니다.
  • 나무 흔들림을 수행 할 수 있습니다.

웹팩은 프론트 엔드에서만 사용되는 것이 아니라 백엔드 Node.js 개발에도 유용합니다.

Webpack의 많은 선행 작업과 그 도구 및 Webpack의 기능에 많은 유사점이 있습니다. 가장 큰 차이점은 이러한 도구는 작업 실행기로 알려져 있으며 Webpack은 모듈 번 들러로 탄생 한 것입니다.

웹팩은보다 집중된 도구입니다. 앱의 시작점 (스크립트 태그가있는 HTML 파일 일 수도 있음)을 지정하기 만하면 webpack이 파일을 분석하고 앱을 실행하는 데 필요한 모든 것을 포함하는 단일 JavaScript 출력 파일로 파일을 묶습니다.

웹팩 설치

웹팩은 각 프로젝트에 대해 글로벌 또는 로컬로 설치할 수 있습니다.

글로벌 설치

Yarn을 사용하여 전체적으로 설치하는 방법은 다음과 같습니다.

원사 글로벌 추가 webpack webpack-cli

npm으로 :

npm i -g 웹팩 webpack-cli

이 작업이 완료되면 실행할 수 있어야합니다

웹팩 cli

로컬 설치

웹팩도 로컬로 설치할 수 있습니다. Webpack은 프로젝트별로 업데이트 할 수 있으므로 Webpack을 사용하는 모든 프로젝트를 업데이트하는 것이 아니라 소규모 프로젝트에 대해서만 최신 기능을 사용하는 것에 대한 저항이 적으므로 권장되는 설정입니다.

털실로 :

원사 추가 webpack webpack-cli -D

npm으로 :

npm i 웹팩 webpack-cli --save-dev

이 작업이 완료되면 package.json 파일에 추가하십시오.

{
  // ...
  "스크립트": {
    "빌드": "웹팩"
  }
}

이 작업이 완료되면 다음을 입력하여 Webpack을 실행할 수 있습니다

원사 빌드

프로젝트 루트에서.

웹팩 구성

기본적으로 Webpack (버전 4부터 시작)에는 다음 규칙을 준수하는 경우 구성이 필요하지 않습니다.

  • 앱의 진입 점은 ./src/index.js입니다.
  • 출력은 ./dist/main.js에 있습니다.
  • Webpack은 프로덕션 모드에서 작동

물론 필요할 때마다 조금씩 웹팩을 커스터마이징 할 수 있습니다. 웹팩 구성은 프로젝트 루트 폴더의 webpack.config.js 파일에 저장됩니다.

진입 점

기본적으로 진입 점은 ./src/index.js입니다.이 간단한 예제는 ./index.js 파일을 시작점으로 사용합니다.

module.exports = {
  /*...*/
  항목 : './index.js'
  /*...*/
}

출력

기본적으로 출력은 ./dist/main.js에 생성됩니다. 이 예제는 출력 번들을 app.js에 넣습니다.

module.exports = {
  /*...*/
  출력 : {
    경로 : path.resolve (__ dirname, 'dist'),
    파일 이름 : 'app.js'
  }
  /*...*/
}

Webpack을 사용하면 JavaScript 코드에 import 또는 require 문을 사용하여 다른 JavaScript뿐만 아니라 모든 종류의 파일 (예 : CSS)을 포함 할 수 있습니다.

Webpack은 JavaScript뿐만 아니라 모든 종속성을 처리하는 것을 목표로하며 로더는이를 수행하는 한 가지 방법입니다.

예를 들어 코드에서 다음을 사용할 수 있습니다.

'style.css'가져 오기

이 로더 구성을 사용하여 :

module.exports = {
  /*...*/
  모듈 : {
    규칙 : [
      {테스트 : /\.css$/, 'css-loader'사용},
    }]
  }
  /*...*/
}

정규식은 모든 CSS 파일을 대상으로합니다.

로더에는 다음과 같은 옵션이 있습니다.

module.exports = {
  /*...*/
  모듈 : {
    규칙 : [
      {
        테스트 : /\.css$/,
        사용하다: [
          {
            로더 : 'css-loader',
            옵션 : {
              모듈 : true
            }
          }
        ]
      }
    ]
  }
  /*...*/
}

각 규칙마다 여러 개의 로더가 필요할 수 있습니다.

module.exports = {
  /*...*/
  모듈 : {
    규칙 : [
      {
        테스트 : /\.css$/,
        사용하다:
          [
            '스타일 로더',
            'css-loader',
          ]
      }
    ]
  }
  /*...*/
}

이 예에서 css-loader는 CSS에서 import 'style.css'지시문을 해석합니다. style-loader는