Webpack이란?[Webpack Book 번역]

텍스트 링크:
https://survivejs.com/webpack...
번역 계획:
https://segmentfault.com/a/11...
관련된 번역되지 않은 단어

input 입력

output 출력

entry 포털 파일

bundle 패키지(패키지 결과)

Webpack은 모듈 패키지입니다.그것은 포장하는 동시에 작업 실행기를 사용할 수 있다.그러나 지역 사회에서 개발한 웹 패키지 플러그인으로 인해 패키지와 작업 실행기 간의 경계가 모호해졌다.때때로 이 플러그인들은 웹 패키지에서 독립적으로 사용되기도 한다. 예를 들어 구축 디렉터리를 정리하거나 구축에 사용되는 플러그인을 배치하기도 한다.(역자 주:grunt 같은 작업 실행기는'두 개의 js 파일을 조합해서 js 압축 css 압축'같은 절차를 자동으로 한 번 걷는 도구입니다)
Webpack은 Ruby on Rails과 같은 다른 환경에서도 사용할 수 있습니다.비록 그 이름은 웹을 가지고 있지만 웹 패키지는 웹에만 국한된 것이 아니다.또한 Build Targets 섹션에서 언급된 대로 다른 패키지를 구성할 수도 있습니다.
T>빌드 도구와 그 이력을 자세히 알고 싶으면 부록 Comparison of Build Tools를 참조하십시오.
Webpack 모듈 기반
최소한 input과 output을 포함하는 웹 패키지 구축 프로젝트를 사용합니다.패키지 처리는 사용자가 정의한 entry에서 시작합니다.entry 자체가 모듈입니다. import을 통해 다른 모듈을 가리킬 수 있습니다.
웹 패키지로 프로젝트를 포장할 때 import을 누비고 프로젝트의 의존 관계도를 구축한 다음 설정 파일의 설정에 따라 output을 생성합니다.프로젝트 코드에서 단독 버블을 분리하기 위해 분할점을 정의할 수도 있습니다.
Webpack은 즉시 사용할 수 있는 ES2015, CommonJS 및 AMD 모듈 표준을 지원합니다.loader 메커니즘도 CSS에 적용되며 css-loader를 통해 css 파일에서 @import과 url()을 사용한다.압축, 국제화, HMR 등 특정 기능을 실현하는 플러그인도 찾을 수 있다.
T>의존도는 노드가 어떻게 서로 연결되는지 설명하는 유방향도이다.이 그림은 파일 사이의 인용(require10import)을 통해 구축된 것이다.Webpack은 자원을 실행하지 않은 상태에서 이 자원을 정적 으로 옮겨다니며 bundle 생성에 필요한 의존도를 생성합니다.
Webpack의 실행 프로세스
Webpack이 entry에서 실행됩니다.entry는 보통 자바스크립트 모듈입니다. 웹 패키지는 여기서부터 반복적으로 처리됩니다.이 과정에서 웹 패키지는loader 설정에 따라 일치하는 모듈을 변환합니다.
모듈 분석
Entry 자체가 모듈입니다.웹 패키지가 entry를 만나면 웹 패키지는 파일 시스템에서 관련 파일과 일치합니다.node 제외modules 이외에 웹 패키지는 특정 디렉터리를 찾을 수 있습니다.웹 패키지가 파일 확장자와 일치하는 방식을 조정할 수도 있고 디렉터리에aliases (별명) 를 정의할 수도 있습니다.이 섹션에서는 Consuming Packages 에 대해 자세히 설명합니다.
웹팩이 파일을 정확하게 해석하면, 로더에 대응하는 일치하는 파일을 처리하고, 서로 다른 로더가 모듈 내용에 대한 변환은 각각 다르다.해석이 실패하면 웹 패키지가 실행 중 오류를 보고합니다.
loader는 파일 형식과 파일의 위치와 같은 여러 가지 방식으로 처리할 파일을 일치시킬 수 있습니다.Webpack은 심지어 import 위치에 따라 분류할 수 있으며, 서로 다른 위치의 import 파일은 서로 다른 변환 방법을 사용합니다.
웹 패키지 로드러에 대해 동일한 해석 과정을 수행합니다.loader를 선택할 때 같은 논리를 사용할 수 있습니다.이러한 이유로 Loader가 자체 구성을 해결했습니다.웹 패키지에서 loader를 찾을 수 없으면 실행 중 오류가 발생합니다.
T> Webpack의 설명은 enhanced-resolve팩에 의존합니다.
Webpack은 모든 유형의 파일을 분석할 수 있습니다.
Webpack은 의존도를 구성할 때 만나는 모든 모듈을 분석합니다.entry에 의존항이 포함되어 있다면, 모든 의존항에 대해 이 과정을 반복해서 실행할 것입니다.Webpack은 Babel이나 Sass 컴파일러와 같은 전용 도구와는 다른 파일 유형에 대해 이 절차를 수행할 수 있습니다.
Webpack은 서로 다른 리소스에 대한 처리 방법을 제어할 수 있습니다.예를 들어, 과도한 네트워크 요청을 피하기 위해 자바스크립트 패키지에 자원을 연결할 수 있다. (예를 들어 그림이 베이스64로 돌아가는 것)Webpack은 또한 CSS 모듈 등 기술을 사용하여 스타일과 구성 요소를 결합시키고 표준 CSS 스타일 문제를 피할 수 있습니다.이런 유연성은 웹 패키지 가치의 구현이다.
웹 패키지는 주로 자바스크립트를 포장하는 데 사용되지만, 이미지나 글꼴 등 자원을 포착하여 단독 파일로 추출할 수 있습니다.Entry는 패키지 처리의 시작점일 뿐입니다.웹 패키지가 생성된 내용은 완전히 당신이 그것을 설정하는 방식에 달려 있습니다.
프로세스 처리
Webpack은 위에서 위로, 오른쪽에서 왼쪽으로(styleLoader(cssLoader('./main.css'))) 처리에 성공한 마운트기를 처리하고, 모듈은 순서대로 loader 처리를 통과합니다.마지막으로 웹 패키지 출력 패키지를 얻을 수 있습니다.이 주제는 Loader Definitions 섹션에서 자세히 설명합니다.
모든 loader가 성공적으로 실행되면 웹 패키지는 마지막 패키지에 원본을 포함합니다.Plugins는 패키징 프로세스의 여러 단계에서 런타임 이벤트를 차단할 수 있습니다.
loader는 많은 일을 할 수 있지만, 고급 임무에 충분한 동력을 제공할 수 없다.Plugins는 웹 패키지에서 제공하는 실행 시 이벤트를 차단할 수 있습니다.좋은 예는 MiniCssExtractPlugin에서 실행된 패키지 추출입니다. 로더와 함께 사용할 때 가방에서 CSS 파일을 추출하여 단독 파일로 추출합니다.만약 이 단계가 없다면, CSS는 생성된 자바스크립트에 내연될 것입니다. 웹 패키지는 기본적으로 모든 코드를 자바스크립트로 간주하기 때문입니다.CSS 추출은 Separating CSS 장에서 다룹니다.
완성
모든 모듈을 처리한 후 웹 패키지에서 output을 생성합니다.output에는 이 프로젝트를 수행하는 manfest 파일을 포함하는 안내 스크립트가 포함되어 있습니다.manifest를 단독 파일에서 추출할 수 있으며, 이 책 뒤에 소개가 있을 것입니다.output은 사용하는build target에 따라 다릅니다. (웹은 유일한 선택이 아닙니다.)
이것은 결코 포장 과정의 전체 내용이 아니다.예를 들어, 웹 패키지는 프로그램이 필요한 기능을 실행할 때 불러오는 단독 패키지입니다.이 주제는 Code Splitting 섹션에서 다룹니다.
구동 Webpack 구성
웹 패키지의 핵심은 설정에 의존합니다.다음은 공식 웹팩 자습서에서 개편된 구성의 예입니다.
webpack.config.js

const webpack = require("webpack");

module.exports = {
  // Where to start bundling
  entry: {
    app: "./entry.js",
  },

  // Where to output
  output: {
    // Output to the same directory
    path: __dirname,

    // Capture name from the entry using a pattern
    filename: "[name].js",
  },

  // How to resolve encountered imports
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.js$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },

  // What extra processing to perform
  plugins: [
    new webpack.DefinePlugin({ ... }),
  ],

  // Adjust module resolution algorithm
  resolve: {
    alias: { ... },
  },
};

Webpack의 설정 모델은 때때로 안개 속에서 꽃을 보는 느낌을 줄 수 있다. 왜냐하면 설정 파일이 너무 크고 속성이 너무 많기 때문이다.모든 속성의 의미를 이해하지 않으면 웹 패키지가 무엇을 하는지 이해하기 어렵다.웹 패키지 설정의 사용을 완전히 이해하게 하는 것이 이 책이 존재하는 주요 목적 중의 하나이다.
자원 해시 인코딩
웹 패키지를 사용하면 모든 가방의 이름에 해시 값 (예를 들어 app.d587bbd6.js) 을 주입하여 버전이 업데이트된 후에 클라이언트의 이전 버전의 가방을 무효화시킬 수 있습니다. (다시 다운로드)패키지 (bundle) 분할은 클라이언트가 이상적인 상황에서 일부분의 데이터만 다시 불러올 수 있도록 합니다.
HMR(Hot Module Replaceable)
너는 아마도 LiveReload 또는 BrowserSync 등의 도구를 사용한 적이 있을 것이다.이 도구들은 변경할 때 자동으로 브라우저를 새로 고칩니다.핫 모듈 교체(HMR)는 리액트를 사용하는 경우 앱이 페이지를 강제로 새로 고치지 않고 앱을 업데이트할 수 있도록 더 선진적이다.비록 이것은 특별하게 들리지는 않지만, 그것은 실천에서 크게 달라질 수 있다.
HMR은 웹팩만의 기능이 아니라 livereactload을 통해서도 Browserify에서 HMR을 사용할 수 있다.
코드 분할
Webpack은 다양한 방법으로 코드를 분할할 수 있습니다.프로그램이 실행될 때 코드를 동적으로 불러올 수도 있습니다.의존은 필요에 따라 즉시 적재할 수 있기 때문에 지연 적재는 부피가 방대한 응용에 특히 적합하다.
소형 응용 프로그램이라도 코드 분할 덕분이다. 왜냐하면 사용자가 더 빨리 사용할 수 있는 것을 얻을 수 있기 때문이다.어쨌든 성능은 응용을 평가하는 중요한 기준이기 때문에 이 기술을 이해하는 것은 가치가 있다.
결론
웹팩은 학습 곡선이 가파르다.그러나 이 덕분에 프로젝트의 장기적인 유지보수는 얼마나 많은 시간과 정력을 절약할 수 있는지 배울 만한 도구이다.Webpack과 기타 도구의 비교를 더욱 잘 이해하기 위해서는 홈페이지에서 다른 도구와 비교을 보십시오.
웹팩은 만능이 아니야.하지만 포장 문제는 확실히 잘 해결됐다.개발 과정에서 걱정해야 할 문제가 또 하나 줄었다.패키지 활용.제이슨과 웹 패키지는 천하를 돌아다녀도 두렵지 않다.
요약:

Webpack은 모듈 패키지이지만, 작업도 실행할 수 있습니다.

Webpack 베이스는 의존도를 기반으로 합니다.Webpack은 원본 파일을 옮겨다니며 의존도와 설정을 바탕으로bundle을 생성합니다.

Webpack은 loader와 plugin에 의존합니다.loader는 모듈 단계에서 실행되며,plugin은 웹 패키지에서 제공하는 갈고리에 의존하여 실행 과정에 잘 접근할 수 있습니다.

Webpack의 구성은 의존도에서 리소스를 변환하는 방법과 출력을 생성하는 방법에 대해 설명합니다.코드 버스트 등의 기능을 사용하려면 버스트 명령을 소스 코드에 쓸 수 있습니다.

웹팩이 이렇게 사랑받는 이유 중 하나는 핫모듈 교체(HMR)다.이 기능은 전체 페이지를 갱신하지 않고 응용 코드를 갱신할 수 있어 개발 체험이 매우 좋다.

Webpack은 파일 이름에 해시 값을 생성할 수 있으며, 컨텐트 변경 시 브라우저 캐시에서 이전 버전의 패키지를 폐기할 수 있습니다.

이 책의 다음 부분에서 웹 패키지를 사용하여 개발 설정을 구축하는 것을 배울 뿐만 아니라 더 많은 관련 개념을 이해할 것이다.
T>웹팩에 대해 의문이 있거나 왜 패키지가 필요한지 모르겠으면 Why would I use a Webpack?을 읽으세요.