module bundling, webpack

웹팩 ? 프론트엔드 애플리케이션 배포를 위해 가장 많이 사용하는 도구, 번들러

module bundler
HTML, CSS, Javascript 등의 자원을 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구

webpack

• 프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾은 다음, 이를 브라우저에서 이용할 수 있는 번들로 묶고 패킹하는 모듈 번들러.
• 여러개의 파일을 하나의 파일로 합쳐주는 모듈 번들러.
• 자바스크립트 어플리케이션을 위한 정적 모듈 번들러. 여러 의존 관계에 있는 모듈들을 하나의 js 파일로 번들링 하는 역알.
• 플러그인을 끼우면 번들링 뿐만 아니라 훨씬 확장적인 기능을 사용할 수도 있음.

---

장점

• 의존 모듈이 하나의 파일로 번들링 되기 떄문에, 별도의 모듈 로더가 필요 없가.
• html파일에서 스크립트 태그로 파일을 로드해야 하는 번거로움을 줄일 수 있다.
• 모듈 시스템 관리
• 로더 사용
• 빠른 컴파일

---

webpack의 핵심개념

• entry : 내부적인 의존성 그래프의 빌드를 시작하기 위해 webpack이 어디를 향해야 하는지 설정.

module.exports = {
entry: './path/to/my/entry/file.js'
};

• output : webpack이 만들어낸 번들을 저장할 위치, 이름을 설정.

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'
  }
};

// ./dist라는 경로에 번들링된 모듈이 my-first-webpack.bundle.js라는 이름으로 저장된다.

• Loaders : Webpack이 이해할 수 있는 건 자바스크립트, json 파일뿐이다. 따라서 loader 설정을 통해 다른 타입의 파일을 처리하고, 어플리케이션이 사용할 수 있는 형태로 변환하고, 의존성 그래프에 추가하는 역할을 수행시킬 수 있음.
• plugins : 플러그인 기능을 통해서 기능을 확장 시킬 수 있음.!!

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in pluginsmodule.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

• mode : production, development, none 설정함으로써, webpack을 각 환경에 맞게 일치시킬 수 있다.

module.exports = {

mode: 'production'

};