5페이지 - 자산 모듈

안녕하세요.이 글은 곧 다가올 5페이지의 새로운 기능에 관한 일련의 글을 시작했다.내가 왜 너에게 이 웹 페이지를 알려줘야 합니까?적어도 나는 그것의 개발에 적극적으로 참여했고, 그것의 원본 코드를 끊임없이 연구했기 때문이다.본고에서 자산 모듈인 웹팩 5의 실험적인 기능을 알려드리고 싶습니다. 일반적인 마운트 프로그램은 버릴 수 있지만, 이러한 기능은 줄일 수 없습니다.
한 페이지를 이미지와 스타일로 묶어야 한다고 상상해 봅시다.

웹 페이지 사용

이 목적에 대한 Webpack 4 구성은 다음과 같습니다.webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          'file-loader',
          'svgo-loader'
        ]
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

src/index.js

import './styles.css';

// ...

src/styles.css

.logo {
  background: url("/images/logo.svg") no-repeat;
  background-size: cover;
  width: 75px;
  height: 65px;
}

출력:

/dist/main.js
/dist/eb4c5fa504857.svg

따라서 모든svg 파일은 svgo으로 처리되고 file-loader에서 묶음 출력 경로로 발송됩니다.A 스타일이 다음과 같이 변환됩니다.

.logo {
  background: url("eb4c5fa504857.svg") no-repeat;
  background-size: cover;
  width: 75px;
  height: 65px;
}

그러나 잠시 후, 웹 페이지를 최적화하기 위해 css에 그림을 삽입하기를 희망할 수도 있습니다.file-loader을 url-loader으로 교체합니다.

      {
        test: /\.svg$/,
        use: [
-         'file-loader',
+         'url-loader',
          'svgo-loader'
        ]
      },

출력:

/dist/main.js

번들 css는 다음과 같습니다.

-   background: url("eb4c5fa504857.svg") no-repeat;
+   background: url("data:image/svg+xml;base64,....") no-repeat;

다음에, 우리는 작은 svg (예, 8kb 이하) 만 연결하고,rest 파일을 출력 디렉터리에 보내기를 희망합니다.url-loader의 limit - 옵션:

      {
        test: /\.svg$/,
        use: [
-         'url-loader',
+         'url-loader?limit=8192',
          'svgo-loader'
        ]
      },

이후 작은svg(8kb 이하)만 내연되고 나머지svg 파일은 출력 디렉터리에 전송되며 url-loader은 file-loader을 은식으로 사용합니다.
문제가 해결됐어요...그러나 잠깐만, 웹팩 5와 자산 모듈 기능이 있으면 이 문제는 url-loader과 file-loader(url-loader을 은밀하게 limit보다 작은 파일-옵션)에 사용할 수 있다.

웹페이지

우선, 우리는 자산 모듈을 사용해야 한다는 것을 명확하게 지정해야 한다.구성에서 다음을 지정합니다.

module.exports = {
  // ...
+ experiments: {
+   asset: true
+ }
};

Asset Modules is an experimental feature at this moment and we are collecting a feedback from the users.

지금,svg 파일을 asset으로 표시하기만 하면 됩니다.위에서 설명한 file-loader 및 url-loader과 관련된 모든 내용은 적재기 없이 바로 사용할 수 있습니다.

      {
        test: /\.svg$/,
-       use: [
-         'url-loader?limit=8000',
-         'svgo-loader'
-       ]
+       type: 'asset',
+       use: 'svgo-loader'
      },

이렇게 하면 type: 'asset' 규칙과 일치하는 모듈에 다음 논리를 적용합니다. 모듈 크기가 8kb (기본값) 보다 작으면 패키지에 연결하고, 그렇지 않으면 파일을 출력 디렉터리에 보냅니다.

Note that use-property is also taken into account (if specified)

아직 끝나지 않았습니다. asset을 제외하고 다른 모듈 유형도 있습니다.

자산/내연

url-loader처럼type: 'asset/inline' 규칙과 일치하는 모든 모듈은 데이터 URL로 패키지에 연결됩니다.

      {
        test: /\.svg$/,
-       type: 'asset',
+       type: 'asset/inline',
        use: 'svgo-loader'
      },

그 밖에 우리는 type: 'asset/inline'에 사용자 정의 데이터 URL 생성기를 지정할 수 있다.
예를 들어, 우리는 mini-svg-data-uri을svg 파일에 사용할 수 있다.이것은svg를 데이터 URL로 변환하지만 base64를 사용하지 않습니다.그것은 가방의 크기를 약간 줄였다.

+ const miniSVGDataURI = require('mini-svg-data-uri');
// ...
      {
        test: /\.svg$/,
        type: 'asset/inline',
+       generator: {
+         dataUrl(content) {
+           content = content.toString();
+           return miniSVGDataURI(content);
+         }
+       },
        use: 'svgo-loader'
      },

css는 다음과 같이 변경됩니다.

-   background: url("data:image/svg+xml;base64,....") no-repeat;
+   background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'....") no-repeat;

We even can use a custom data-url generator and the use-property

자산 / 자원

file-loader처럼.type: 'asset/resource' 규칙을 준수하는 모든 모듈은 출력 디렉토리로 전송됩니다.

      {
        test: /\.svg$/,
-       type: 'asset/inline',
+       type: 'asset/resource',
-       generator: {
-         dataUrl(content) {
-           content = content.toString();
-           return miniSVGDataURI(content);
-         }
-       },
        use: 'svgo-loader'
      },

자산 모듈의 출력 경로

기본적으로 모든 유형의 asset/resource 모듈은 출력 디렉토리의 루트 디렉토리(기본값은 dist)로 전송됩니다.그러나 output.assetModuleFilename을 사용하면 다음과 같은 동작을 변경할 수 있습니다.

module.exports = {
+ output: {
+   assetModuleFilename: 'assets/[name][ext]'
+ },
  // ...
};

출력:

/dist/main.js
/dist/assets/logo.svg

참고로 [name]을 [hash]으로 교체하면 자산 장기 캐시에 완벽한 기반을 마련할 수 있습니다.

module.exports = {
  output: {
-    assetModuleFilename: 'assets/[name][ext]'
+    assetModuleFilename: 'assets/[hash][ext]'
  },
  // ...
};

출력:

/dist/main.js
/dist/assets/eb4c5fa504857.svg

또한 특정 자산 규칙을 assetModuleFilename으로만 변경할 수 있습니다.예를 들어 우리는svg 아이콘을 dist/icons에 발사하고 나머지 자산 모듈을 dist/assets에 발사할 수 있다.

      {
        test: /\.svg$/,
        type: 'asset/resource',
+       generator: {
+         filename: 'icons/[hash][ext]'
+       },
        use: 'svgo-loader'

출력:

/dist/main.js
/dist/assets/fd441ca8b6d00.png
/dist/icons/eb4c5fa504857.svg

자산 / 출처

raw-loader처럼.type: 'asset/source' 규칙과 일치하는 모든 모듈은 변환 없이 내부 연결됩니다(있는 그대로).file.txt

hello world

webpack.config.js

module.exports = {
       // ...
      {
        test: /\.svg$/,
        type: 'asset/resource',
        generator: {
          filename: 'icons/[hash][ext]'
        },
        use: 'svgo-loader'
      },
+     {
+       test: /\.txt$/,
+       type: 'asset/source'
+     },
      // ...

index.js

import './styles.css';
+ import txt from './file.txt';

+ console.log(txt); // hello world

출력:

/dist/main.js
/dist/icons/eb4c5fa504857.svg

자산.

asset/resource과 asset/inline을 합병하다.다음 논리에 따라 정책을 선택합니다. 모듈 크기가 8kb (기본값) 보다 크면 asset/resource 정책을 사용하고, 그렇지 않으면 asset/inline 정책을 사용합니다.

module.exports = {
       // ...
      {
        test: /\.svg$/,
-       type: 'asset/resource',
+       type: 'asset'
-        generator: {
-          filename: 'icons/[hash][ext]'
-        },
        use: 'svgo-loader'
      },
      {
        test: /\.txt$/,
        type: 'asset/source'
      },
      // ...

asset/inline 정책 사용 제한 사항이 무시될 수 있습니다.

      {
        test: /.svg$/,
        type: 'asset',
+       parser: {
+         dataUrlCondition: {
+           maxSize: 20 * 1024 // 20kb
+         }
+       },
        use: 'svgo-loader'
      },

전체적으로 말하자면 웹 패키지 5 자산 모듈은 습관적인 로드 프로그램을 버릴 수 있다. 왜냐하면 그의 기능은 상자를 열면 바로 사용할 수 있기 때문이다.
완전한 예는 here에서 찾을 수 있다.

5번 홈페이지는 언제 출판됩니까?

우리는 날짜를 모른다.내가 이 안내서를 썼을 때 웹 패키지 5는 beta.13버전으로 사용자의 피드백을 수집하고 있었다.프로젝트를 웹 패키지 5로 이전할 수 있습니다. (생산, 위험 부담에 사용)너는 더 많은 here을 읽을 수 있다

붓을 대다

나는 웹 패키지 5의 새로운 기능과 웹 패키지 자체를 계속 토론할 계획이다.어떤 문장은 더 크고, 어떤 문장은 더 작을 것이다.나의 홈페이지에서 매우 작은 주석을 볼 수 있다.
고마워요 고마워요