🤘🏻 🏇🏼 😙 वेबपैक 5 - एसेट मॉड्यूल 🧑 📉 👰🏿

अच्छा दिन। इस पोस्ट के साथ मैं आगामी वेबपैक की नई विशेषताओं के बारे में लेखों की एक श्रृंखला शुरू करना चाहता हूं। मैं वेबपैक के बारे में बात क्यों करना चाहता हूं? कम से कम क्योंकि मैं इसके विकास में एक सक्रिय हिस्सा लेता हूं और लगातार इसके अंदर घुसता हूं। इस पोस्ट में मैं एसेट मॉड्यूल के बारे में बात करना चाहता हूं - वेबपैक 5 की प्रायोगिक विशेषता, जो आपको अपने लाभ को बनाए रखते हुए कई परिचित लोडर से छुटकारा पाने की अनुमति देता है।

कल्पना कीजिए कि हमें चित्रों और शैलियों के साथ एक पृष्ठ को इकट्ठा करने की आवश्यकता है।

Webpack 4 समाधान

इस कार्य के लिए वेबपैक 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 का उपयोग करके संसाधित किया जाएगा और बंडल कोड के साथ निर्देशिका में रखी गई फ़ाइल-लोडर का उपयोग करके , और सीएसएस, सीएसएस-लोडर का उपयोग करके , कुछ इस तरह से बदल जाएगा:

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

कुछ बिंदु पर, हमें अपने पृष्ठ को अनुकूलित करने की आवश्यकता हो सकती है और हम सीधे इनलाइन छवियों को css में लेना चाहते हैं। ऐसा करने के लिए, url-loader को प्रतिस्थापित file-loaderकरें :

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

निष्कर्ष:

/dist/main.js

संकलित सीएसएस निम्नानुसार बदल जाएगा:

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

इसके अलावा, हम केवल छोटे svg- आकार वाले (उदाहरण के लिए, 8kb तक) को इनलाइन करना चाहते हैं, और बाकी को अलग-अलग फ़ाइलों के रूप में छोड़ सकते हैं। इसके लिए, url-loaderएक विशेष सीमा सेटिंग है:

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

, svg- 8, svg , url-loader file-loader.

, webpack 5 Asset Modules, , url-loader file-loader ( url-loader , , limit).

webpack 5

, , Asset Modules. :

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

, svg- asset , file-loader url-loader — , , - :

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

, , type: 'asset' : 8 ( ), , .
use .

asset .

asset/inline

url-loader. , type: 'asset/inline' data-url:

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

, type: 'asset/inline' data-url.
, svg- mini-svg-data-uri, svg data-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;

data-url.

asset/resource

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 , output.path ( dist), output.assetModuleFilename :

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

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

[name] [hash] long term caching:

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

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

, asset-. , svg- dist/icons, asset- 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

asset/source

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

asset/resource asset/inline, - , . , 8, 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'
      },

: Asset Modules webpack 5 " ".
.

webpack 5?

. , webpack 5 beta.13, . , webpack 5 ( , production).

P.S

webpack 5 webpack. , , ( webpack) -.

ध्यान देने के लिए आपको धन्यवाद।

वेबपैक 5 - एसेट मॉड्यूल