使用Parcel替代webpack时svg sprite生成与打包目录拆分问题求助

问题1：SVG Sprite生成及图标渲染异常 #

修复方案： #

• 优先使用预生成SVG Sprite的方案：安装npm包svg-sprite，编写简单的构建前置脚本，将所有图标目录下的svg文件合并为包含所有symbol的sprite文件，在pug模板的body标签起始位置直接内联该sprite文件，写法为!= require('./生成的sprite路径.svg').default
• 图标引用写法调整：内联后直接通过symbol的id引用即可，无需写完整文件路径，示例代码：

svg(width="24" height="24")
  use(href="#facebook")

• 如果你要保留单个svg引用的写法，需要将href的内容改为动态引入，让Parcel自动替换为正确的打包后路径：

svg(width="24" height="24")
  use(href=require("../../icons/facebook.svg"))

同时检查svg源文件是否有fill属性和页面背景重叠、宽高为0的问题。 #

问题2：打包后资源按类型分类到子目录 #

修复方案： #

Parcel 2.x 可以通过自定义命名插件实现资源分类：

1. 安装自定义命名插件：npm i parcel-namer-custom -D
2. 在项目根目录的.parcelrc文件中添加配置，替换默认命名器：

{
  "extends": "@parcel/config-default",
  "namers": ["parcel-namer-custom", "..."]
}

3. 在package.json中添加路径匹配规则，根据需求自定义各类型资源的输出路径：

"parcel-namer-custom": {
  "**/*.js": "js/[name].[contenthash].js",
  "**/*.css": "css/[name].[contenthash].css",
  "**/*.{png,jpg,jpeg,gif,svg,webp,ico}": "imgs/[name].[contenthash].[ext]",
  "**/*.html": "[name].html"
}

配置完成后执行正常的build命令，打包产物会自动拆分到对应子目录。 #

内容的提问来源于stack exchange，提问作者Николай Пушкин