[Webpack 알아보기] #10 - Webpack 기본 개념 정리

특징

• 기본적으로 JavaScript만 해석이 가능
  • 다른 확장자를 해석할 수 있도록 loader를 이용
• webpack.config.js는 node.js 환경에서 동작
  • 로컬에 컴퓨터를 제어할 수 있는 기능들을 통해 번들과정을 진행
  • node.js의 가져오기, 내보내기를 이용해야 함

패키지 설치

npm i -D webpack webpack-cli webpack-dev-server

• webpack-cli
  • 터미널에서 웹팩을 동작시키는 패키지
• webpack-dev-server
  • 웹팩을 통해 개발 서버를 오픈하는 패키지

Webpack.config.js

• mode
  • 정의
    • 현재 어떤 모드(devlopment, production)인지 명시
    • production 모드일 때는 제품의 코드가 난독화되어 나옴
• resolve
  • 정의
  • 옵션

    // webpack.config.js
    const path = require('path')
    
    module.exports = {
    	resolve: {
    		extensions: ['.js', '.ts'],
    		alias: {
    			'@': path.resolve(__dirname, 'src'),
    			'@components': path.resolve(__dirname, 'src/components'),
    		}
    	}
    }

    • extensions: 생략하고 싶은 확장자 명시
    • alias: 경로 별칭을 지정 (절대적인 위치에서 찾을 수 있는 장점)
• entry
  • 정의
    • 어떤 파일로 진입해서 파일을 해석할 것인가에 대한 진입점
    • 설정 방법

      // webpack.config.js
      module.exports = {
      	entry: './src/main.js'
      }

• output
  • 정의
    • 최종 결과를 내어주는 속성
  • 옵션
    • 설정 방법

      const path = require('path')
      
      module.exports = {
      	output: {
      		path: path.resolve(__dirname, 'dist'),
      		filename: 'bundle.js',
      		clean: true
      	}
      }

    • path: 결과물을 반환할 경로
    • filename: 결과물의 이름
    • clean: build 시, dist 폴더를 모두 지움
• module
  • 정의
    • 다양한 확장자의 파일들이 처리되는 방식을 결정
  • 옵션

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

    • test: 해당 파일의 확장자를 찾음
    • use
      • test에 입력한 확장자를 해석할 수 있게 해주는 loader를 사용하는 옵션
      • 여러개 지정 시, 배열로 입력
      • 아래에서 위부터 평가되기 때문에 먼저 해석이 필요한 로더는 먼저 작성이 필요
• plugins
  • 정의
    • 웹팩의 플러그인
  • 옵션

    // webpack.config.js
    const CopyPlugin = require('copy-webpack-plugin')
    
    module.exports = {
    	plugins: [
    		new CopyPlugin({
    			patterns: [
    				{ from: 'static', to: 'dist' }
    			]
    		})
    	]
    }

    • dd

entry외의 path에서 path.resolve()를 사용하는 이유

• 특히 output은 webpack.config의 모든 옵션들이 동작한 뒤, 최종 결과를 내어줌 ⇒ 최종 결과를 만드는 기능이 webpack.config.js 파일이 아닌 경우가 있을 수 있음
  ⇒ 명시해주지 않으면 다른 기능의 내부에서 파악하기 때문에 처음부터 root 경로를 명시
  
• webpack.config.js 경로가 아닌 다른 기능의 내부에서 경로를 파악할 수 있음 ⇒ 엉뚱한 곳의 경로를 참조할 수 있기 때문
  
• path가 필요하지 않다면 path가 내장되어 있을 가능성이 있다.
• entry 외에는 path.resolve() 사용을 권장

관련 패키지

• webpack-dev-server

  • 기능
    • 웹팩을 통해 개발 서버를 오픈
    • 코드를 수정해도 개발 서버에 바로 반영되어 개발의 편의성 제공
  • 설치 방법

    npm i -D webpack-dev-server

  • 설정 방법

    // package.json
    scripts: {
    	dev: 'webpack-dev-server --mode development'
    }

  • 옵션

    • devServer의 옵션이 바뀌는 경우, 재실행 필요

      // webpack.config.js
      moudle.exports = {
      	devServer: {
      		port: 1234
      	}
      }

    • port : 개발서버의 포트번호 (기본값: 8080 )

• html-webpack-plugin

  • 기능
    • template으로 지정한 html 파일을 가공해서 dist 폴더에 반환
  • 설치 방법

    npm i -D html-webpack-plugin

  • 설정 방법

    // webpack.config.js
    const HtmlPlugin = require('html-webpack-plugin')
    
    module.exports = {
      plugins: [
        new HtmlPlugin({
          template: './src/index.html'
        })
      ]
    }

    • template: 웹팩이 해석해야하는 파일이 어디 있는지 명시
      • path.resolve 기능이 내장되어 있음으로 생략 가능

• css-loader

  • 기능
    • 웹팩이 css를 해석할 수 있게 해주는 패키지
  • 설치 방법

    npm i -D css-loader

  • 설정 방법

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

• sass-loader

  • 기능
    • 웹팩이 sass, scss를 해석할 수 있게 해주는 패키지
  • 설치 방법

    npm i -D css-loader sass sass-loader

  • 설정 방법

    // webpack.config.js
    module.exports = {
    	module: {
    		rules: [
    			test: /\.s?css$/,
    			use: [
    				'css-loader',
    				'sass-loader'
    			]
    		]
    	}
    }

• copy-webpack-plugin

  • 기능
    • 최종 결과물에 favicon, 기타 이미지 자원들을 자동으로 넣어주는 플러그인
  • 설치 방법

    npm i -D copy-webpack-plugin

  • 설정 방법

    // webpack.config.js
    const CopyPlugin = require('copy-webpack-plugin')
    
    module.exports = {
    	plugins: [
    		new CopyPlugin({
    			patterns: [
    				{ from: 'static', to: 'dist' }
    			]
    		})
    	]
    }

    • patterns: from에서 to로 파일을 복사 (to는 output으로 자동으로 명시되어 있음)

• tsconfig-paths-webpack-plugin

  • 기능
    • tsconfig.json의 paths를 이용하여 webpack에도 동일한 alias를 추가
  • 설치 방법

    npm i -D tsconfig-paths-webpack-plugin

  • 설정 방법

    // webpack.config.js
    const path = require("path") 
    const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin') 
    const tsConfigPath = path.resolve(__dirname, "./tsconfig.json")
    
    module.exports = {
      resolve: {
        extensions: ['.ts', '.js'],
        plugins:[
          new TsconfigPathsPlugin({
            configFile: tsConfigPath
          })
        ]
      },
    }

• MiniCssExtractPlugin

  • 기능
    • js에 사용된 css를 별도 추출
    • MiniCssExtractPlugin.loader 사용시, style-loader는 같이 사용하면 안됨
  • 설치 방법

    npm i -D MiniCssExtractPlugin

  • 설정 방법

    // webpack.config.js
    const path = require('path')
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    module.exports = {
      entry: './src/main.ts',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.[contenthash].js',
        clean: true
      },
      module: {
          {
            test: /\.s[ac]ss$/i,
            use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
            exclude: /node_modules/
          }
        ]
      },
      plugins: [
        new MiniCssExtractPlugin({
          filename: 'assets/css/style.[contenthash].css',
        })
      ]
    }

• css-loader

  • 기능
    • 확장자가 .css인 모듈을 처리하기 위한 로더
    • 반드시 style-loader가 있어야 함 (mini-css-extract-plugin을 사용하지 않는 경우)

• style-loader

  • 기능
    • css-loader로 처리한 css 데이터를 번들 파일이 브라우저에서 실행될 때 style 태그에 삽입
    • style-loader가 없는 경우, css 스타일 미적용

• sass-loader

  • 기능
    • 확장자가 .scss인 모듈을 처리하기 위한 로더
    • 반드시 css-loader, style-loader가 있어야 함 (mini-css-extract-plugin을 사용하지 않는 경우)