[JavaScript] Webpack

🍀 Webpack이란

여러가지 의존성 모듈을 하나로 번들링해주는 것을 말합니다. 

여기서 (모듈)번들링은 웹앱을 구성하는 몇십 몇백개의 자원들을 하나의 파일로 병합 및 압축해주는 동작을 의미합니다.

 

  🌱 근데 Webpack을 왜 쓰는 걸까?

여러개의 파일을 하나로 번들링하므로 여러개의 자바스크립트 파일을 로드해야하는 번거로움이 사라진다고 합니다. 하지만 이것을 충분한 답이 되지 못한다고 생각을 하였고 아래와 같은 이유들을 찾을 수 있었습니다. 

• 여러개의 자바스크립트를 로드할 시 생기는 변수의 유효범위 문제를 해결할 수 있습니다.
  • 이는 파일 단위로 자바스크립트 모듈을 관리하기 때문입니다. 
    • 변수의 이름이 중복 선언될 때 의도치 않은 값을 할당, 출력할 수 있다.
• 웹 개발 작업의 자동화 도구로 사용됩니다. 
  • 특히 front 개발 시 코드 수정 후 변경된 내용을 보려면 브라우저에서 새로고침을 눌러야만 했는데 Webpack으로 이 번거로움을 해결 할 수 있는 것 입니다. 
  • 웹 서비스 개발, 웹 서버 배포 시 아래와 같은 작업을 해야하는데 이것들을 자동화 할 수 있습니다. 
    • HTML, CSS, JS 압축
    • 이미지 압축
    • CSS 전처리기 변환
• 웹 앱의 빠른 로딩 속도와 높은 성능을 위해 사용됩니다. 
  • 로딩 속도를 높이려면 브라우저에서 서버로 요청하는 파일 숫자를 줄여야 하는데(왜냐? HTTP 요청 숫자가 제한되어있기 때문) Webpack은 이를 해결해 줍니다. 
  • 이는  여러개의 자바스크립트 파일을 로드해야하는 번거로움이 사라진다와 일맥상통한다고 할 수도 있겠군요.

  🌱 간단하게 Webpack을 적용 해보자

아래의 명령어를 통해 환경을 설정하면 됩니다. (node와 npm이 설치되어 있음을 바탕으로 작성하였습니다.)

npm init -y
npm i webpack-cli -D

#root 디렉토리에 index.html 파일 생성
#root 디렉토리에 src 폴더에 생성 후 index.js 생성

#package.json 파일을 아래와 같이 수정
"scripts": {
	"build": "webpack --mode=none"
}

npm run build

#root 디렉토리에 webpack.config.js 파일 생성

#package.json 파일을 아래와 같이 수정
"scripts": {
	"build": "webpack"
}

npm run build

#index.html, index.js, webpack.config.js에 채우는 내용은 아래 깃헙을 참고해주시길 바랍니다.

 

여기를 클릭해주세요.

 

위 명령어들과 깃헙을 참고하면 웹팩을 적용할 수 있는데, 루트 디렉토리의  webpack.config.js에 대하여 조금더 상세하게 알아봅시다. 

  🌱 webpack.config.js(or Webpack)의 속성

첨부한 깃헙 링크에서 루트 디렉토리의 webpack.config.js를 보면 아래와 같이 구성되어있음을 알 수 있습니다. 

const path = require('path');

module.exports = {
    mode: 'none',
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

여기서 entry, output 속성이 무엇을 의미하는지 그리고 위에서 나와있지는 않지만 loader, plugin은 어떤 속성인지 살펴봅시다.

•  entry 속성은 웹팩을 실행할 대상 파일을 의미합니다.
  • 위 코드를 바탕으로 설명하자면 src 폴더 밑의 index.js를 대상으로 웹팩이 빌드를 수행할 수 있는 것입니다.
  • entry 속성에는 웹 애플리케이션의 전반적인 구조와 내용이 담겨야합니다. 
    • 그렇기에 웹이 싱글페이지 애플리케이션 일때와 멀티페이지 애플리케이션일때의 모습이 다릅니다.

      //SPA 일 때
      entry: './src/index.js'
      
      //멀티페이지 애플리케이션 일 때
      entry: {
        login: './src/LoginView.js',
        main: './src/MainView.js'
      }​

       
• output 속성은 웹팩을 돌리고 난 결과물의 파일 경로를 의미하며 객체 형태로 filename, path 속성을 지정해주어야합니다. 
• Loader는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성입니다. 
  • 빌드의 대상이 되는 index.js에

    import './styles.css';​

    이와 같은 코드가 있을 경우 styles.css 파일을 해석하기 위한 적절한 로더를 추가해달라는 에러를 웹팩은 띄울 것입니다. 
  • CSS로더를 설치하고 webpack.config.js를 아래와 같이 수정하면 에러를 해결할 수 있습니다.

    npm i css-loader -D​

    const path = require('path');
    
    module.exports = {
        mode: 'none',
        entry: './src/index.js',
        output: {
            filename: 'main.js',
            path: path.resolve(__dirname, 'dist'),
        },
        module: {
        	rules: [
            	{
                	test: /\.css$/,
                    use: ['css-loader']
                }
            ]
        },
    };​

  • test는 파일의 유형을, use는 로더의 이름을 말합니다. 
• plugin은 웹팩의 기본동작에 추가적인 기능을 제공하는 속성입니다. 로더는 파일을 해석하고 변환하는 반면, 플러그인은 결과물의 형태를 바꾸는 역할을 한다고 생각할 수 있습니다. 
  • 플러그인의 배열에는 생성자 함수로 생성한 객체 인스턴스만 추가될 수 있습니다. 
  • 예시는 링크를 참고하면 됩니다. 

 

 

출처 : 캡틴 판교님의 웹팩 핸드북, 모던 자바스크립트 딥다이브, webpack 공식문서