chain.module
.rule('svg-raw')
.test(/\.svg$/)
.resourceQuery(/raw/) // import icon from 'file.svg?raw'
.type('asset/source')
chain.module
.rule('svg-icon')
.test(/\.svg$/)
.resourceQuery(/icon/) // import icon from 'file.svg?icon'
.use()
.loader('svg-sprite-loader').options({ spriteFilename: 'icons.svg' })
.end()
// старое правило из бойлерплэйта
chain.module.rule('images').resourceQuery(/^$/) // пустой query
{
test: /\.(png|jpe?g|gif|svg|webp|avif|ico)(\?.*)?$/, // тут все равно только полное имя файла, без query string, может быть наследие четвертого вебпака
type: 'javascript/auto',
use: [
{
loader: 'url-loader',
options: {
esModule: false,
limit: 10000,
name: 'img/[name].[hash:8].[ext]'
}
],
}
{
test: /\.svg$/,
resourceQuery: /raw/,
type: 'asset/source',
}
resourceQuery: /^$/
, заработало {
"compilerOptions": {
"baseUrl": ".",
"paths": {
// пример других алиасов (копия webpack aliases):
"src/*": [
"src/*"
],
"scripts/*": [
"scripts/*"
],
"app/*": [
"*"
],
"components/*": [
"src/components/*"
],
"layouts/*": [
"src/layouts/*"
],
"pages/*": [
"src/pages/*"
],
"assets/*": [
"src/assets/*"
],
"boot/*": [
"src/boot/*"
]
}
},
"exclude": [
"dist",
"node_modules",
//... другие не нужные пути
]
}
...
/* purgecss start ignore */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* purgecss end ignore */
...
Time: 12245ms
Asset Size Chunks Chunk Names
app.build.js 50.4 kB 0 [emitted] app
vendor.build.js 546 kB 1 [emitted] [big] vendor
style.css 53 kB 0, 1 [emitted] app, vendor
style.css.map 86 bytes 0, 1 [emitted] app, vendor