webpack import&require css的坑

刚开始接触webpack时,出现了css加载优先级问题,看了下代码。
main.js代码如下:

require('a.css');
import {b} form './b.js';
...

b.js代码如下:

require('b.css');

按照常理说,打包后,b.css的代码会在a.css下面,这样,相同css选择器的优先级,应该b.css会覆盖a.css。但是结果相反。
今天看到阮老师的文章,
参考链接:http://es6.ruanyifeng.com/#docs/module#import命令

Paste_Image.png

import竟然有提升效果,和var,function效果类似。
webpack打包时会优先打包import命令加载的js,故会出现上面的b.css代码在a.css代码上面的情况。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的...
    My_Oh_My阅读 8,213评论 40 247
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,330评论 4 31
  • 原文首发于:Webpack 3,从入门到放弃 Update (2017.8.27) : 关于 output.pub...
    昵称都被用完了衰阅读 1,925评论 4 19
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,242评论 7 35
  • 朋友前两天跟我说男朋友出轨了他们在六年的感情上画了句号他说男朋友在游戏理认识了比自己小五岁的女生,还偷偷跑去他的城...
    惋惜阳阅读 245评论 0 0