如何在webpack中加载css文件-创新互联

这篇文章将为大家详细讲解有关如何在webpack中加载css文件，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联制作网站网页找三站合一网站制作公司,专注于网页设计,成都网站设计、做网站,网站设计,企业网站搭建,网站开发,建网站业务,680元做网站,已为近千家服务,创新互联网站建设将一如既往的为我们的客户提供最优质的网站建设、网络营销推广服务!

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的。

css的三种引入方式

1.行内样式，最直接最简单的一种，直接对HTML标签使用style=""。2.内嵌样式，就是将CSS代码写在之间，并且用

进行声明。3.外部样式，其中链接样式是使用频率高，最实用的样式，只需要在之间加上

就可以了。其次就是导入样式，导入样式和链接样式比较相似，采用@import样式导入CSS样式表，不建议使用。

关于如何在webpack中加载css文件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

当前文章：如何在webpack中加载css文件-创新互联
文章出自：http://6mz.cn/article/gdjod.html

网站建设知识

如何在webpack中加载css文件-创新互联

css的三种引入方式

其他资讯