코드 세그먼트:MiniCssExtractPlugin을 사용하여 CSS 분할 블록 이름 지정

React: 17.0.2
Webpack: 5.67.0
Webpack CLI: 4.9.1
mini-css-extract-plugin 2.5.3

토막

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  ...
  output: {
    optimization: {
      ...
      minimizer: [
        new MiniCssExtractPlugin({
          chunkFilename: (pathData) => {
            return `${pathData.chunk.id}.[contenthash].css`;
          },
        }),
      ],
    },
  },
  ...
};

목표

Webpack 5Split Chunks를 사용하여 빌드할 때 보내는 CSS 파일의 캐시를 지웁니다.

설정

import React 구성 요소의 하나 이상의 CSS 파일

블록의 단일 CSS 파일은 빌드할 때 전송됩니다.

어셈블리를 다운스트림으로 가져올 때 이 파일을 요청합니다.

HTTP를 통해 파일을 요청하면 파일이 캐시되고 새 버전에서 손상될 가능성이 높습니다.

솔루션

위의 코드 세그먼트를 사용하여 MiniCssExtractPlugin을 구성하려면 웹팩 구성 파일의 chunkFilename 속성에 명명 함수를 지정합니다.[contenthash] 자리 차지 문자가 출력 파일 내용을 생성하는md4 산열(예를 들어 [contenthash].js->4ea6ff1de66c537eb9b2.js).See more .

Reference

이 문제에 관하여(코드 세그먼트:MiniCssExtractPlugin을 사용하여 CSS 분할 블록 이름 지정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/cbillowes/code-snippet-name-css-split-chunks-using-minicssextractplugin-fg2

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다