[Webpack] webpack3 에서 webpack4 업그레이드 하기

2024. 5. 8. 10:14· WEBPACK
목차
  1. npm 라이브러리 버전 올리기
  2. 빌드 설정 변경

npm 라이브러리 버전 올리기

이름 구 버전 현 버전  
webpack 3.8.0     4.44.2  
webpack-dev-server 2.9.7 3.11.3  
webpack-cli X 3.3.0  
html-webpack-plugin 2.30.1 3.2.0  
vue-loader 13.3.0 14.2.2  
uglifyjs-webpack-plugin 1.1.1 X  
extract-text-webpack-plugin 3.0.2 4.0.0-beta.0  
@babel/core X 7.23.2  
@babel/preset-env X 7.23.2  
babel-loader 7.1.1 8.2.5  
babel-core 6.22.1 X  
babel-preset-env 1.3.2 X  
compression-webpack-plugin X 4.0.1 웹팩버전과 맞춰야함  
compression X 1.7.4 serve.js 압축 사용  

빌드 설정 변경

  • webpack 3 에서 기존 제공되지 않았던 기능들을 플러그인으로 대체해 사용하였지만 webpack 4 에서는 기본 제공하는 기능이 되어 빌드설정 변경
  • webpack.IgnorePlugin : 플러그인 중 필요한 모듈만 사용하고 사용하지 않는 모듈들은 빌드되지 않도록 하는 설정 ex) moment.js / locale
  • vendor 에 모든 npm 이 다운로드 되어 초기렌더링 속도가 느림, 각각 패키지를 다운하도록 변경
  • 난독화한(Uglify) 코드에 gzip(GNU zip) 알고리즘을 써서 더 압축 : js 파일을 .gz 파일로 압축하고 브라우저에서 .gz 파일을 열수 있도록 설정
// webpack.config.js

mode: "devlopment",

optimization: {
  minimize: true, //UglifyJsPlugin 계승
  runtimeChunk: 'single',
  splitChunks : {
    chunks: 'all',
    maxInitialRequests: Infinity,
    minSize: 0,
    cacheGroups: {
    vendor: {
      test: /[\\/]node_modules[\\/]/,
      name(module) {
      // get the name. E.g. node_modules/packageName/not/this/part.js
      // or node_modules/packageName
      const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
      // npm package names are URL-safe, but some servers don't like @ symbols
      return `npm.${packageName.replace('@', '')}`;
      },
    },
   },
  },
  concatenateModules: true, //ModuleConcatenationPlugin을 계승
},

plugin: [
  new webpack.IgnorePlugin({
    resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/,
  }),
  new CompressionWebpackPlugin({
    filename: '[path].gz[query]',
    algorithm: 'gzip',
    test: /\.js$|\.css$|\.scss$|\.html$/,
    threshold: 10240,
    minRatio: 0.8
  }),
]

'WEBPACK' 카테고리의 다른 글

번들러(Bundler)란?  (0) 2024.03.05
[Webpack] 빌드시 정적파일 복사 copy-webpack-plugin  (1) 2023.12.28
  1. npm 라이브러리 버전 올리기
  2. 빌드 설정 변경
'WEBPACK' 카테고리의 다른 글
  • 번들러(Bundler)란?
  • [Webpack] 빌드시 정적파일 복사 copy-webpack-plugin
seominki
seominki
seominki
minki's blog
seominki
전체
오늘
어제
  • LIST (44)
    • JAVASCRIPT (11)
    • TYPESCRIPT (7)
    • REACT & NEXT (6)
    • VUE (8)
    • WEBPACK (3)
    • FIREBASE (1)
    • LINUX (1)
    • GIT (2)
    • 자료구조 & 알고리즘 (2)
    • CS (0)
    • HTML&CSS (1)
    • AWS (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

인기 글

최근 글

hELLO · Designed By 정상우.v4.2.2
seominki
[Webpack] webpack3 에서 webpack4 업그레이드 하기
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.