html 配置css文件,web前端：webpack加载css文件及其配置

css样式可以直接存储于html网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。

webpack加载css文件及其配置

1当我们写了几个css文件之后如果想要引用到html中去的话我们最开始的方式就是通过link标签将css文件导入进去，但是如果我们的css文件有很多的话，一个个的导入是不推荐的；而现在我们学了webpack，我们希望的是通过打包bundle.js文件，将所有的依赖文件全部导入进去。

2我们要知道的是，如果在入口函数main.js文件中如果没有导入css文件，那么打包的bundle.js文件必然不会有css文件，所有我们需要让main.js文件依赖css文件。

3使用代码：require('css文件地址')

4依赖完之后，我们再打包一下npmrunbuild会发现报错了。错误为：Youmayneedanappropriateloadertohandlethisfiletype。意思是说你可能需要一个合适的loader来处理这个文件

5于是我们打开webpack的中文网址，在里面找到了我们需要安装css-loader和style-loader这两个loader。并且我们还需要在webpack.config.js文件中配置一下这些loader

6于是我们使用npm下载这两个依赖，代码如下：npminstallcss-loaderstyle-loader--save-dev

7在webpack.config.js文件中，有一个module的属性，该属性为一个对象，在该对象中有个rules属性，是一个数组，数组中的每一项都是处理不同文件loader所需要的对象。代码如下：

constpath=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。

1注意：css-loader这个loader的作用是用来让main.js文件加载该css文件，而style-loader的作用是将模块的导出作为样式添加到DOM中。这里可能有人会有疑问：按这样的作用来讲的话应该先加载文件再作为样式添加到DOM中去才对，那数组中的顺序应该不是这样的。我在这里很明确的告诉你，你的想法是没有错的，只是webpack他这一点非常的奇特，它是从数组的最后一个元素，从右到左的顺序加载loader的。

2设置依赖，下载好loader并配置完之后，我们再运行之后便发现css文件中的样式就出来了。

CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。