[Webpack] 웹팩 추가 설정

splitChunk

splitChunk 옵션을 사용하면 node_modules처럼 변하지 않는 JS 파일을 vendor파일로 분리하여 브라우저 캐시를 활용하도록 최적화

이전

이후

기존의 엔트리 파일 하나
벤더 파일 하나 총 2개가 생성됨.

optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'all',
          name: 'vendor',
          test: /[\\/]node_modules[\\/]/,
          filename: '[name].[chunkhash].js',
        },
    },
},

생성한 그룹에는 node_modules아래에 있는 파일들을 'vendor.[chunkhash].js'이름으로 합쳐라라는 의미를 가지고 있다.

assets 폴더로 빼기

현재는 빌드시 빌드된 파일들이 dist 폴더 내부에서 한번에 보여지게되는 구조인데 asset관련된 파일들을 따로 폴더로 두는 방식으로 변경하고자 한다.

{
  test: /\.(png|jpg|jpeg|gif)$/i,
  type: "asset/resource",
  generator: {
     filename: 'static/[hash][name][ext]',
  },
},