👴🏽 🎪 👨🏿‍🔧 Webpack 5-资产模块 ♎️ 👨‍🎤 ✅

美好的一天。我想通过这篇文章开始一系列有关即将发布的Webpack 5的新功能的文章。为什么我要谈论Webpack？至少因为我积极参与了它的开发并不断地深入研究它的内部。在这篇文章中，我想谈谈资产模块-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进行处理，并使用放置在捆绑了软件包的目录中的file-loader进行处理，而使用css-loader的css将变为以下内容：

.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），其余的作为单独的文件保留。为此，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) -.

谢谢您的关注。

Webpack 5-资产模块