webpack - loader, optimization

web pack loader

loader? → 다른 파일 확장자를 다루기 위한 Third Party 확장 프로그램

module.exports = {
  module: {
    rules: [
      {
        test: /\.filename1$/,
        use: ['loader-b', 'loader-a'],
      },
      {
        test: /\.filename2$/,
        use: ['loader-d', 'loader-c'],
      },
    ],
  },
}

module로 취급하길 원하는 각각의 파일을 rules 배열에 객체로 추가해야한다.
해당 객체들은 파일의 타입을 정의하는 test, loader로 이뤄진 배열인 use 속성으로 구성된다.
이 때, use에 정의된 loader는 오른쪽부터 왼쪽으로 불러옴(순서 중요)에 유의!

css 적용하기

webpack에서 css를 적용하기 위해 필요한 loader → css-loader , style-loader

css-loader 는 css 파일을 불러오는데 사용되고,
style-loader 는 DOM에서 스타일 시트를 불러오는데 사용된다.

npm install --save-dev css-loader style-loader

이전에 만든 source폴더에 style.css를 새롭게 만들어 css를 작성한 후,
이를 index.js에 import 해주자.

// index.js
import './styles.css'
console.log('Im from source!')

다음으로 webpack.config.js 에 loader를 설정!

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
}

서버 재시작 후 npm start를 실행하면 브라우저에 반영된 모습을 확인할 수 있다!

모던 JS 적용하기

webpack 자체로는 모던 JS를 모든 브라우저에 호환되는 코드(ES5)로 바꿀 수 없다.
이를 위해 Babel을 설치! → @babel/core , babel-loader , @babel/preset-env

@babel/core 는 실제 엔진 패키지이고,
babel-loader 는 webpack에서 필요한 loader이며,
@babel/preset-env 는 JS를 ES5로 변환시키는데 사용된다.

npm install --save-dev @babel/core babel-loader @babel/preset-env

다음으로 root 폴더에 babel.config.json 파일을 생성! → babel 설정 파일

// babel.config.json
{
    "presets": ["@babel/preset-env"]
}

설치된 preset-env를 설정해준 모습!

이후 webpack.config.js 파일에 설치한 loader를 추가해주면 되겠다.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
}

ES6 구문이 적용된 JS코드도, 브라우저에 호환되는 변환 코드로 빌드 된 것을 확인할 수 있다!

webpack mode

webpack에는 개발(development)과 배포(production) 모드가 존재한다.

• 개발 모드
  최적화 작업X. 단순히 모든 JS 코드를 쓰고, 브라우저에서 읽어서, application을 빠르게 reload.
• 배포 모드
  많은 최적화 적용. terser-webpack-plugin을 통해 자동으로 최적화 적용 + 번들 사이즈 줄임.
  process.env.NODE_ENV 와 같은 유용한 환경 변수 설정을 통해 퍼포먼스 향상.

// package.json
"scripts": {
    "dev": "webpack --mode development",
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },

배포 모드를 사용하기 위한 스크립트를 추가해준 모습!

최적화 - code splitting

큰 번들을 피하기 위한 최적화 기법 → code splitting or lazy loading
(webpack에는 application의 초기 번들 크기가 244kb 이하여야 한다는 제한이 있다)

이들을 통해 버튼 클릭, 라우트 변경 등의 동작을 수행할 때 원하는 코드 조각을 불러온다!
이 때, 이러한 코드 조각들을 chunk 라 부른다.

webpack의 code splitting 기법에는 3가지가 존재한다.

• 여러 개의 엔트리 포인트를 갖는 것
• optimization.splitChunks 사용
• 동적 import

이 중 여러 엔트리 포인트를 갖는 방안은, 규모가 크고 복잡한 프로젝트에서는 잘 동작하지 않는다고 한다..!
(원할 경우 webpack 환경 설정 파일에서 여러 개의 엔트리 포인트 정의 가능)

optimization.splitChunks 사용

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: { chunks: 'all' },
  },
}

splitChunks 속성 추가시 엔트리 포인트가 줄어듬을 확인할 수 있다.

동적 import

동적 import → 조건에 따라 코드를 불러오는 것!
이를 통해 사용자 액션이나 route에 기반해 코드를 불러올 수 있다.