webpack加载css文件及其配置

  • 当我们写了几个css文件之后如果想要引用到html中去的话我们最开始的方式就是通过link标签将css文件导入进去,但是如果我们的css文件有很多的话,一个个的导入是不推荐的;而现在我们学了webpack,我们希望的是通过打包bundle.js文件,将所有的依赖文件全部导入进去。
  • 我们要知道的是,如果在入口函数main.js文件中如果没有导入css文件,那么打包的bundle.js文件必然不会有css文件,所有我们需要让main.js文件依赖css文件。
  • 使用代码:require('css文件地址')
  • 依赖完之后,我们再打包一下 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('path');
    module.exports = {
        // 在配置文件中,手动指定 入口 文件和 出口 文件
        mode:'development',   //  webpack4.x版本中需要加入这个属性
        entry:'./src/main.js',  //  入口文件
        output:{  //  出口文件
            path:path.resolve(__dirname,'dist'),  //  指定将要打包好的文件应该要输出到哪个地方去(注意:路径必须是绝对地址)
            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文件中的样式就出来了。

总结

以上所述是小编给大家介绍的webpack加载css文件及其配置方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。