want to add the following configuration to Webpack:
(svg files in src/icons are loaded with svg-sprite-loader, and svg in other folders are loaded with url-loader)
{
test: /\.svg$/,
loader: "svg-sprite-loader",
include: [resolve("src/icons")],
options: {
symbolId: "icon-[name]"
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: "url-loader",
exclude: [resolve("src/icons")],
options: {
limit: 10000,
name: utils.assetsPath("img/[name].[hash:7].[ext]")
}
}, vue-cli < v3.0.0, you can modify it directly in webpack.base.conf.js.
but in vue-cli v3.0.0, the configuration mode has changed.
follow the ide/webpack.md" rel=" nofollow noreferrer "> document but still haven"t changed it for a long time
now vue.config.js is written like this (does not run correctly):
const path = require("path")
function resolve(dir) {
return path.join(__dirname, "..", dir)
}
module.exports = {
chainWebpack: config => {
// loader
config.module
.rule("svg")
.test(/\.svg$/)
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
//.include([resolve("src/icons")])
.options({ symbolId: "icon-[name]" })
.end()
// loader
config.module
.rule("svg")
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
.use("url-loader")
.loader("url-loader")
.tap(exclude => {
exclude = [resolve("src/icons")]
return exclude
})
}
}