Bonne journée. Avec cet article, je veux commencer une série d'articles sur les nouvelles fonctionnalités du prochain webpack 5. Pourquoi est-ce que je veux parler de webpack? Du moins parce que je participe activement à son développement et que je me plonge constamment dans ses entrailles. Dans cet article, je veux parler des modules d'actifs - une fonctionnalité expérimentale du webpack 5, qui vous permet de vous débarrasser de plusieurs chargeurs familiers, tout en conservant leurs avantages.
Imaginez que nous devons assembler une page avec des images et des styles.
Solution Webpack 4
La configuration du webpack 4 pour cette tâche peut ressembler à ceci:
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;
}
Conclusion:
/dist/main.js
/dist/eb4c5fa504857.svg
Avec cette approche, tous les fichiers svg seront traités en utilisant svgo et en utilisant le chargeur de fichiers placé dans le répertoire avec le bundle assemblé, et css, en utilisant css-loader , se transformera en quelque chose comme ceci:
.logo {
background: url("eb4c5fa504857.svg") no-repeat;
background-size: cover;
width: 75px;
height: 65px;
}
À un moment donné, nous devrons peut-être optimiser notre page et nous pourrons vouloir incorporer des images directement dans css. Pour ce faire, remplacez file-loader
par url-loader :
{
test: /\.svg$/,
use: [
- 'file-loader',
+ 'url-loader',
'svgo-loader'
]
},
Conclusion:
/dist/main.js
Le CSS compilé changera comme suit:
- background: url("eb4c5fa504857.svg") no-repeat;
+ background: url("data:image/svg+xml;base64,....") no-repeat;
De plus, nous souhaitons peut-être n'inclure que les petits fichiers au format svg (par exemple, jusqu'à 8 Ko) et laisser le reste dans des fichiers séparés. Pour cela, url-loader
il existe un paramètre de limite spécial:
{
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) -.
Merci pour l'attention.