背景:

  首先声明一下,我只是个菜鸡,为了解决问题才去看的源码,解决完问题之后也就没有兴趣看其他部分代码了,所以这篇文章是一次很低层次的解读,角度也相当片面,想必会有很多喷点吧。

  事情的经过是这样,今年十月底的时候对公司前端产品的构建工具做了一次升级,从webpack1升级到了webpack4,现在已经投入正式环境,写这篇文章的时候我在外边出差,忙的时候997,闲的时候也997,这会儿就有点闲得慌,所以就想着把之前的操作复盘总结一遍,这个过程其实非常顺利,没遇到过几次报错,打开build出来的文件之后却让我莫名的诧异,我的样式并没有挂载到dom元素中,但构建过程中并没有遇到过报错。我这边使用的前端框架是vue,由于解析vue文件样式代码的过程中需要用到的loader有vue-loader css-loader(或者其他css预处理语言的loader)、vue-style-loader,于是我就把问题定位到了这几个loader上面。因为之前有成功过的案例,在确认过我的配置跟之前写的配置一样之后,我对使用的这些依赖产生了怀疑,但是我实在是很好奇到底是哪个流程中除了问题,所以就对构建流程中这部分的细节进行了一些了解。

  我起了一个新的入口文件和父组件,去除无关的代码来复现这个问题。

  不多说,直接多图警告

事 故 现 场

  执行完打包命令之后,按理来说打开dist目录中的index.html页面中应该就会出现一个傻不愣登的正方形色块比如:

  但你我都知道如果这么顺利的话就不会有这篇水文存在了,实际上打开是这样的:

  我之前大概了解过vue-style-loader是在style-loader的基础之上写出来的,主要功能跟style-loader类似,只是多了一些额外的特性,所以我想切换成style-loader试一下,然后愕然发现居然正常了,于是推测问题出在vue-style-loader身上,就在去看依赖的源码并做了一些尝试:

 
 
 
 
 
 

  但问题来了:

  我不可能真的去改node_modules中的vue-style-loader,因为每换一个环境,就需要改一次源码这肯定是不现实的,正确的解决办法一定不在这里。

我开始思考vue-style-loader与style-loader的区别,为什么style-loader就能顺利处理esModule呢,然后我在style-loader的代码中找到了线索,源码中有个名为options的json文件,描述了这个loader的配置项及其含义,其中有一个esModule属性:

 
  于是我去github上看了style-loader的发布历史,最近的一个版本:
 

  从options中的附带链接也了解到了现在的css-loader也有个配置属性esModule,从css-loader@3.4.0(2019-12-17)开始,css-loader支持esModule属性,@4.0.0(2020-07-26)开始这个属性的默认值为true。

终于破案了,实际上是因为我复盘的时候,安装的style-loader、vue-style-loader、css-loader没有指定版本,默认安装了最新的依赖,css-loader、style-loader都把配置项的esModule默认值设为了true,而vue-style-loader最后一次更新已经是快三年前了,这期间的改动没有同步,所以vue-style-loader是不处理esModule的,所以这个问题的解决方法就出来了,只需要把css-loader的options添加上esModule:false就能够解决问题。

vue-style-loader源码初步分析的更多相关文章

  1. 学习 MyBatis 的一点小总结 —— 底层源码初步分析

    目录 MyBatis 如何获取数据库源? MyBatis 如何获取 sql 语句? MyBatis 如何执行 sql 语句? MyBatis 如何实现不同类型数据之间的转换? 在过去程序员使用 JDB ...

  2. 从vue.js的源码分析,input和textarea上的v-model指令到底做了什么

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能:对,它本质上只是一个语法糖,但到底是一个 ...

  3. TaskTracker任务初始化及启动task源码级分析

    在监听器初始化Job.JobTracker相应TaskTracker心跳.调度器分配task源码级分析中我们分析的Tasktracker发送心跳的机制,这一节我们分析TaskTracker接受JobT ...

  4. 通过解读 WPF 触摸源码,分析 WPF 插拔设备触摸失效的问题(问题篇)

    在 .NET Framework 4.7 以前,WPF 程序的触摸处理是基于操作系统组件但又自成一套的,这其实也为其各种各样的触摸失效问题埋下了伏笔.再加上它出现得比较早,触摸失效问题也变得更加难以解 ...

  5. HashMap源码实现分析

    HashMap源码实现分析 一.前言 HashMap 顾名思义,就是用hash表的原理实现的Map接口容器对象,那什么又是hash表呢. 我们对数组都很熟悉,数组是一个占用连续内存的数据结构,学过C的 ...

  6. Spring Ioc源码分析系列--Ioc源码入口分析

    Spring Ioc源码分析系列--Ioc源码入口分析 本系列文章代码基于Spring Framework 5.2.x 前言 上一篇文章Spring Ioc源码分析系列--Ioc的基础知识准备介绍了I ...

  7. MapReduce的ReduceTask任务的运行源码级分析

    MapReduce的MapTask任务的运行源码级分析 这篇文章好不容易恢复了...谢天谢地...这篇文章讲了MapTask的执行流程.咱们这一节讲解ReduceTask的执行流程.ReduceTas ...

  8. Activity源码简要分析总结

    Activity源码简要分析总结 摘自参考书籍,只列一下结论: 1. Activity的顶层View是DecorView,而我们在onCreate()方法中通过setContentView()设置的V ...

  9. MapReduce的MapTask任务的运行源码级分析

    TaskTracker任务初始化及启动task源码级分析 这篇文章中分析了任务的启动,每个task都会使用一个进程占用一个JVM来执行,org.apache.hadoop.mapred.Child方法 ...

随机推荐

  1. 容器中实现拉取其它服务器的jar包程序

    缘由:在做接口自动化测试时,若业务场景有一个前置仓库,在该仓库内完成一系列的场景测试,一旦某一场景测试失败,脏数据对环境造成影响则需要清理: 1.我容器的内核系统为Debian GNU/Linux 1 ...

  2. 如何有效恢复误删的HDFS文件

    HDFS是大数据领域比较知名的分布式存储系统,作为大数据相关从业人员,每天处理HDFS上的文件数据是常规操作.这就容易带来一个问题,实际操作中对重要数据文件的误删,那么如何恢复这些文件,就显得尤为重要 ...

  3. Nginx配置Https(详细、完整)

    Nginx配置Https(详细.完整) 原文链接:请支持原创 前置条件: 在配置https之前请确保下面的步骤已经完成 服务器已经安装nginx并且通过http可以正常访问 不会安装nginx的可以参 ...

  4. Kubernetes 使用 Kubevirt 运行管理 Windows 10 操作系统

    原文链接:https://fuckcloudnative.io/posts/use-kubevirt-to-manage-windows-on-kubernetes/ 最近我发现我的 Kubernet ...

  5. Spring Cloud Alibaba 初体验(五) SkyWalking

    一.下载与运行 本文使用 SkyWalking 7.0.0:https://www.apache.org/dyn/closer.cgi/skywalking/7.0.0/apache-skywalki ...

  6. 20200416_Centos 7.2 在安装系统之前把数据备份出来

    第一种方法: 起因: 服务器强制断电, 然后就再也启动不起来了, 进入救援模式, 一直卡死在 charoot /mnt/sysimages; 然后想在救援模式下的shell中挂载我的2T的移动硬盘, ...

  7. 单调栈高封装模板hia hia hia

    这个单调栈应该可以了,舒服舒服 #include <bits/stdc++.h> using namespace std; #define limit (400000 + 5)//防止溢出 ...

  8. 第2章 Python编程基础知识 第2.1节 简单的Python数据类型、变量赋值及输入输出

    第三节 简单的Python数据类型.变量赋值及输入输出 Python是一门解释性语言,它的执行依赖于Python提供的执行环境,前面一章介绍了Python环境安装.WINDOWS系列Python编辑和 ...

  9. TextClip构造方法报OSError:MoviePy creation of None failed because of the following [WinError 2]系统找不到指定的文件

    ☞ ░ 前往老猿Python博文目录 ░ 在使用moviepy的构造方法创建实例时报错: "C:\Program Files\Python37\python.exe" F:/stu ...

  10. moviepy音视频剪辑:多个视频合成一个视频

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一.视频合成概述 视频合成,也称为非线性编辑,实际 ...