webpack 내용 정리.

웹팩을 사용하려면 webpack과 webpack-cli 라이브러리를 다운받습니다.

물론 어플리케이션의 직접적인 실행 파일이 아니므로 -D 옵션을 붙여 devDependencies로 다운받습니다.

 

다운받은 후 프로젝트 내 webpack.config.js 파일의 내용입니다.

module.exports = {
  mode: 'none',
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'scss-loader']
      },
      {
        test: /\.js$/,
        use: ['babel-loader']
      }
    ]
  },
}

1) mode는 빌드 시 결과물의 성격을 지정합니다.

none, development, production 중 지정 가능하며, production을 지정하면 빌드 결과물 js파일이 최적화, 난독화됩니다.

development을 지정하면 최적화까지 수행하며 난독화는 수행하지 않습니다.

 

2) enrty는 번들링의 시작, 기준점이 될 js파일의 위치를 지정합니다.

cra가 자동으로 만들어주는 webpack 설정 파일에는 해당 entry가 app.js로 되어있습니다.

즉, 이것은 번들링을 위한 진입점으로써 이 어플리케이션의 구동에 쓰이는 모든 css, js, 사진 파일 등 모든 것들이 entry의 대상이 되는 js파일 기준으로 엮어져야 합니다.

 

3) output은 번들링 후 배포 파일의 이름과 생성 위치를 지정합니다.

output: {
    filename: '[name][chunkhash].js',
    path: path.resolve(__dirname, 'dist')
},

위처럼 번들링된 js파일 이름을 해쉬 형식으로도 지정할 수 있습니다.

 

4) module은 loader를 적용하는 로직을 정의합니다. 

위의 코드는 index.js에서부터 연쇄적으로 연결되는 js와 scss파일들을 압축해 번들링을 수행합니다.

loader는 어떻게 번들링을 수행할 것인지 결정하는 핵심 내용으로 test에 들어가는 내용은 번들링의 대상이 될 파일의 확장자를 의미합니다.

use프로퍼티의 배열에는 번들링 로직에 적용할 loader 라이브러리의 이름이 들어갑니다.

이를 위해 필요한 loader들을 -D 옵션으로 미리 다운로드 해줘야 합니다.

 

중요한 점은 loader들을 배열에 나열할 때 번들링 로직이 먼저 수행되는 순으로 오른쪽부터 왼쪽으로 내열해야합니다.

해당 규칙을 지키지 않거나 번들링에 필요한 라이브러리를 배열에 입력하지 않으면 빌드 과정 중에 에러가 나니 유의할 필요가 있습니다.

 

예시로 위의 코드의 module에서 scss파일을 test하는 로직은 scss파일을 먼저 평가하여 css파일로 변환한 후 html의 style태그에 바인딩합니다.

이 순서에 따라, 오른쪽부터 왼쪽까지 scss-loader -> css-loader -> style-loader 순으로 배열에 loader를 넣어준 것을 확인할 수 있습니다.