Webpack(Devtool, Babel Loader, Resource Asset, bundle analyzer)

1. Webpack Devtool 

빌드한 파일이 실제로 동작하니까, 내가 쓰는 파일하고 다르자나

그 때, 쓰는거라함. 소스 코드 간 매핑을 해줘서, 아 여기구나 하게 해주는거라는데

개발자 도구에서 source 탭에 소스 코드가 원래 코드랑 동일하게 나오게 해주던데

기능이나 성능은 각 각 다르다니까 쓰다가 배우도록

 

설정하는 방법:

devtool: 'source-map',

이렇게 하면 source-map이라는 devtool 쓴다는 거 끝

webpack.config.js에 추가하면 됨

 

참조: https://webpack.js.org/configuration/devtool/#root

Devtool | webpack

 

 

2. Babel Loader

Typescript나 JSX 쓰게 해주거나, ES6문법에 안맞는거 arrow function 같은거 알아서 호환 잡아주는 애임

기본적으로 사용을 하려면 3가지 라이브러리 받아줘야 함

npm i -D @babel/core @babel/preset-env babel-loader

각 각 기능까진 지금은 잘 모르겠음

그리고 webpack.config.js 들어가서

module - rules 배열에 객체 하나 추가하면 됨

{

        test: /\.js$/i,

        exclude: /node_modules/,

        use: {

          loader: 'babel-loader',

          options: {

            presets: ['@babel/preset-env'],

          },

        },

      },

 

.js 로 끝나는 파일 대상으로

node_modules 제외하고

loader는 babel-loader 써줘

option으로는 preset을 @babel/preset-env로 해줘

 

뭐 이런건데 자세한건 모름

@babel/core 도 쓰는 곳이 있었는데 아무튼 지금은 까먹음

 

 

 

 

3. Resource Asset

폰트, 이미지 같은거 웹팩으로 빌드해서 쓰려면 assets  설정을 해줘야함

안해주면 에러나고 안됨

 

설정하려면 webpack.config.js 들어가서

module - rules 배열 안에 객체 추가해주면 됨

{

        // Resource Asset 설정

        test: /\.(png|svg|jpg|jpeg|gif)$/,

        type: 'asset/resource',

      },

png, svg, jpg, jpeg, gif 확장자는 asset/resource 니까 알아둬 하는거임

근데 이렇게만 하면 파일이름이 랜덤하게 나옴, 어차피 쓰는데는 문제없긴한데(웹팩이 알아서 연결해주니까)

파일이름 원래꺼랑 동일하게 하고 싶으면 output에 설정 해주면 됨

output 객체 안에

assetModuleFilename: '[name][ext]', // Asset 설정으로 바뀐 파일 이름 원래대로 나오게 설정

이거 넣어주면 끝임, 원래 이름하고 똑같은 이미지 파일이 빌드했을 때 dist에 생기는 거임

 

 

 

4. bundle analyzer

npm run dev 했을 때, 파일마다 리소스 얼마나 잡아먹는지 시각적으로 보여주는 플러그인이라함

쓰는 방법은

npm i -D webpack-bundle-analyzer 하고

plugins 배열에 새로운 인스턴스 객체 하나 만들어주면 끝

new BundleAnalyzerPlugin(),

이렇게 생김

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

여기 들어있음

 

아무튼 npm run dev 하면 서버랑 같이 켜짐

나중에 프로젝트 커지면 좀 쓸만하다 함