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

Sonny·2022년 5월 5일
8

Webpack

목록 보기
10/10
post-thumbnail

특징

  • 기본적으로 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을 사용하지 않는 경우)
profile
FrontEnd Developer

5개의 댓글

comment-user-thumbnail
2022년 5월 10일

와우,, 정리하는 겸 보러왔는데 더 배워갑니다🙌🏻

1개의 답글
comment-user-thumbnail
2022년 5월 12일

그냥 따라치고, 설정된 건 그런가보다 하고 넘어갔는데, 진짜 잘 정리되어있어서 기본 개념을 알 수 있었어요!
감사합니다 :)

1개의 답글
comment-user-thumbnail
2022년 6월 23일

잘 봤습니다 !! 좋은 글 감사합니다 :)

답글 달기