KNOWEDGE+SOLUTION
webpack加载css文件及其配置
//www.toadstooLcomics.com
 当咱们写了几个css文件之后假如想要引用到html中去的话咱们最开端的方法便是经过link标签将css文件导入进去,可是假如咱们的css文件有许多的话,一个个的导入是不引荐的;而现在咱们学了webpack,咱们期望的是经过打包bundle.js文件,将一切的依靠文件悉数导入进去。 咱们要知道的是,假如在进口函数main.js文件中假如没有导入css文件,那么打包的bundle.js文件必定不会有css文件,一切咱们需求让main.js文件依靠css文件。 运用代码:require 依靠完之后,咱们再打包一下 npm run build 会发现报错了。过错为:you may need an appropriate loader to handle this file type。意思是说你或许需求一个适宜的loader来处理这个文件 所以咱们翻开webpack的中文网址,在里面找到了咱们需求装置 css-loader 和 style-loader 这两个loader。而且咱们还需求在webpack.config.js文件中装备一下这些loader 所以咱们运用npm下载这两个依靠,代码如下:npm install css-loader style-loader --save-dev 在webpack.config.js文件中,有一个module的特点,该特点为一个目标,在该目标中有个rules特点,是一个数组,数组中的每一项都是处理不同文件loader所需求的目标。代码如下:
 const path = require, // 指定即将打包好的文件应该要输出到哪个当地去
 filename: bundle.js // 指定输出文件的文件名
 module:{
 rules:[
 {test:/\.css$/ , use:[ style-loader , css-loader ]}
 }
其间test表明咱们要处理的是哪种类型的文件,use中的每一项则是处理该类文件需求的loader。
留意:css-loader这个loader的效果是用来让main.js文件加载该css文件,而style-loader的效果是将模块的导出作为款式添加到 dom 中。这儿或许有人会有疑问:按这样的效果来讲的话应该先加载文件再作为款式添加到dom中去才对,那数组中的次序应该不是这样的。我在这儿很清晰的告知你,你的主意是没有错的,仅仅webpack他这一点十分的独特,它是从数组的最终一个元素,从右到左的次序加载loader的。 设置依靠,下载好loader并装备完之后,咱们再运行之后便发现css文件中的款式就出来了。
CONTACT
工作时间(Working Hours):周一至周五(Mon-Fri): 9:00-18:00 周末及节假日(Weekend & Holidays): 9:00-12:00
ADDRESS: 广东省湛江市开发区金地花园11栋

E-MAIL:13030199666@qq.com
PHONE: 13030199666
QQ: 13030199666

LEAVE A MESSAGE
You can say something,or design service and consulting