inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)

자주 사용하는 로더

asset/inline

664

김동현

작성한 질문수 16

1

webpack 5 부터는 url-loader가 아닌 asset/inline을 사용한다는데 asset/inline에서 로더를 실행할 파일 크기 제한을 어떻게 하나요?

url-loader에서 limit 옵션을 asset/inline에서는 어떻게 주는지 궁금하네요!

babel 웹팩 nodejs eslint

답변 4

4

yuyukgh

webpack5 asset에 대한 코드에요

자세한 사항은 

https://webpack.kr/guides/asset-modules/#general-asset-type

위에 있더라구요~

1

yuyukgh

0

123581321345589144

{
    test: /\.(png|jpg|jpeg|gif|svg)$/,
    type: 'asset',
    parser: {
        dataUrlCondition: {
            maxSize: 20 * 1024,
        },
    },
},

Webpack 5 버전에서 Asset Module은 기본적으로 8KB 기준으로
asset/resource 와 asset/inline 자동 변환이 된다고 하는데용..
Asset Module을 이용해서 강의 내용이랑 같은 결과로 처리하고 싶으면,
위처럼 설정하면 될 것 같습니다~

0

김정환

wepbkac5에서는 url-loader를 사용하지 않고 Asset Module로 제공하는가 보네요. 혹시 Performance 속성이 관련 있을까 싶습니다. 

  • performance.maxAssetSize

https://webpack.js.org/configuration/performance/#performancemaxassetsize

지금 시점에서 해당 강의를 듣는 것에 대하여

1

111

3

2025년 기준 번들러 트렌드와 선택 기준이 궁금합니다 (Webpack, Vite, tsup 등)

1

223

1

에러 해결 공유드립니다

1

225

2

webpack 4 버전과 호환되는 플러그인 버전 공유드립니다

1

233

2

eslint

0

381

3

도와주세요!

0

167

2

[수강 중 트러블슈팅 공유] webpack, webpack-cli 버전

1

145

1

질문 an error occurred while loading the image

1

469

1

webpack에서 babel-loader 사용할때 질문

1

150

1

자주 사용하는 플러그인 에서 질문이 있습니다.

1

168

1

eslint no-extra-semi 관련 질문

1

144

1

webpack5 에서 open index.html하는법 + 질문

1

168

1

TypeError: ((process.env.NODE_ENV === "production") && [MiniCssExtractPlugin]) is not iterable

2

302

1

혹시 웹팩 5 내용으로 강의 업데이트는 안되는건가요?

1

371

1

에러없이 png안뜨시는 분들

1

274

1

Error: Cannot find module 'node:crypto'

1

465

1

DefinePlugin 관련; env와 관련하여, (21.06.22 16:15, aloha_jh) 답변포함

1

407

1

깃허브 확인 문의

0

575

1

폴더를 prettier로 돌렸을 때 나오는 에러 구문에 대한 질문

0

407

1

해쉬값과 캐쉬 갱신

1

461

1

Hash 에러 발생

1

2668

2

webpack.config.js에서의 CommonJS방식에 대한 질문

0

831

3

웹팩 버전

0

524

1

웹팩-cli 버전을 명시하지 않으면 왜 에러가 날까요?

0

485

1