• webpack raw-loader 打包问题


    昨天(2021-10-13)一个react项目打包后的页面样式全乱了,而本地开发时样式是正常的,花了半天时间研究了这个问题,现在把整个过程记录下。

    先说下原因,原因是一个同事在 webpack.config.js 里的 module  rules 下面新加了一个规则

    {
        test: /.svg$/,
        use: ['raw-loader']
    },

    这个规则会把 svg 图片里的内容读成字符串,但我在我的js文件里引入了 iconfont.css

    import './style/repairIcon/iconfont.css'

    继续追踪下去发现 iconfont.css 里有一行代码

    url('iconfont.svg?t=1594257335620#iconfont')

    就是这行代码导致打包后的css文件不能用,在没有在 webpack.config.js 里加入上面那个规则的时候,这行代码在打包后的css里是这样的

    url(/static/media/iconfont.****.svg)

    加了上面这个规则后,这行代码在打包后的css里就变成了这样

    url('********')
    raw-loader插件把 iconfont.svg 里的内容都读成了字符串写入了打包后的css里,svg内容字符串里有换行符,在mac电脑上打包时换行符是 
    ,在css文件里不会出错,
    但在window电脑上打包的css文件里换行符变成了 /n,导致打包后的css文件报错,整个css文件都不能用

    我思考后解决方法有两种:
    1、我查看了代码后发现没有用到 iconfont.css,就不再引入 iconfont.css
    //import './style/repairIcon/iconfont.css'

    2、第二种方法我没有实践过,在

    {
        test: /.svg$/,
        use: ['raw-loader']
    },

    这个配置规则里加一个 exclude 参数,把某些svg图片排除

  • 相关阅读:
    [Objective-C语言教程]决策结构(10)
    [Objective-C语言教程]循环语句(9)
    [Objective-C语言教程]关系运算符(8)
    [Objective-C语言教程]常量(7)
    [Objective-C语言教程]变量(6)
    [Objective-C语言教程]数据类型(5)
    转 Apache Ant 实现自动化部署
    转 智能化运维最佳实践-自动化
    ANT 操控 ORACLE数据库实践
    转: Ant 脚本的结构化设计
  • 原文地址:https://www.cnblogs.com/yuewangshanren/p/15405895.html
Copyright © 2020-2023  润新知