Webpack 5 - وحدات الأصول

يوم جيد. مع هذا المنشور ، أريد أن أبدأ سلسلة من المقالات حول الميزات الجديدة لحزمة الويب القادمة 5. لماذا أريد التحدث عن webpack؟ على الأقل لأنني أقوم بدور نشط في تطويرها وأتعمق باستمرار في دواخلها. في هذا المنشور ، أود أن أتحدث عن وحدات الأصول - وهي ميزة تجريبية لحزمة الويب 5 ، والتي تتيح لك التخلص من العديد من اللوادر المألوفة ، مع الحفاظ على فائدتها.

تخيل أننا بحاجة إلى تجميع صفحة تحتوي على صور وأنماط.

حل Webpack 4

قد تبدو تهيئة 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 واستخدام محمل الملفات الموضوعة في الدليل مع تجميع الحزمة ، وسيتحول css ، باستخدام css-loader ، إلى شيء مثل هذا:

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

في مرحلة ما ، قد نحتاج إلى تحسين صفحتنا وقد نرغب في تضمين الصور مباشرة في css. للقيام بذلك، قم باستبدال file-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 فقط (على سبيل المثال ، حتى 8 كيلوبايت) ، وترك الباقي كملفات منفصلة. لهذا ، 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) -.

شكرا للانتباه.