webpack5——样式处理1

首先是在开发者环境下
自己书写的css，虽然可以直接在index.html中引入，但是index.html会原封不动的导出来，但是我们需要重新将css模块进行输出，所以需要重新设置。

1.在入口文件index.js中引入index.css

此时，在html模板页面中不用引入样式

//index.js
require('./index.css');

2.加载css文件的解析插件

loader的作用是将源代码进行转化，转换成我们需要的模块，loader的设置在modules中进行设置。具体有关插件的介绍可是在“webpakc之插件介绍中看到”。

解析样式可萌需要的插件（根据自己的样式文件类别进行选择）：

1. css-loader（解析@import这种语法以及路径）
2. style-loader（将css加入到head标签中）
3. less-loader（把less文件解析成css，实现需要安装less）
4. sass-loader
5. stylus-loader

3.使用插件时的样式优先级

1.在一般的style标签中，样式位置越向下，优先级越高，会覆盖前面的样式。
2.style-loader默认会把标签插件head的底部，如果想插入到样式的顶部，需要自己设置style-loader的options中的“insetAt”，将其值设为top

       {test:/\.css$/,use:[{
            loader:'style-loader',
            options:{
               insertAt:'top',//将解析出的样式插到页面的顶部
            } 
         },'css-loader']}