一文大白话讲清楚webpack基本使用——2——css相关loader的配置和使用

1. 建议按文章顺序从头看是看

• 第一篇：
• 一文大白话讲清楚啥是个webpack
• 第二篇：
• 一文大白话讲清楚webpack基本使用——1——完成webpack的初步构建
• 然后看本篇，Loader的配置和使用

2. Loader的配置和使用

• 上一篇文章我们完成了基本的webpack构建，让index.html和main.js关联起来，并成功的在浏览器里面运行了index.html,控制台打印出来了5
• 这篇讲Loader，先简单回忆一下，Loader的作用就是把非js模块的文件进行转换和处理，以便于webpack能对其像js模块那样完成构建打包
• 那我们先讲啥呢，当然是CSS，HTML+CSS+javascript那是绝配么
• 我们上节写了html和js，但没写css，现在我们想加上css样式
• 我们在src目录下新建一个文件夹stylesheet，用来存放我们的css文件，然后里面创建一个index.css

2.1 css-loader

• 假设我们希望在index.html上插入一个p标签，给p标签挂上一个class,名字叫’p-loader-css’，设置p标签的字体和颜色
• 于是我们在index.css里面写样式

.p-loader-css{
    font-size:18px;
    color:red
}

• 定义好样式后，我们在main.js里面创建p标签，并挂在样式

import './stylesheet/index.css'
let p=document.createElement('p')
p.className='p-loader-css'
p.textContent='我是p标签的样式，通过loader处理后被构建'
document.body.appendChild(p)//把p标签插入body里面

• 这样就完成了p标签的创建和样式添加
• 我们老规矩，npm运行一下

npm run build

• 我们可以看到，终端报了一个错误
  

• 大概意思就是模块转换失败，你可能需要一个loader来处理这类型的文件，目前没有这样的loader可以处理这样的文件，不过好在最后还是打包了，我们运行了一下再说
  

• 可以发现也是报了同样的错误

• 为什么呢，因为我们说了，webpack只能对js模块进行构建处理，css模块搞不了，所以需要一个loader来协助处理，那就是css loader

• css-loader主要处理样式文件中的import和url等语句，不负责将样式注入到HTML页面中，干这个活的另有他人，就是style-loader,负责把转换后的css模块注入到HTMl页面中

• 所以我们现在需要两个loader来处理上述的问题

• 先安装

npm install css-loader style-loader

• 然后再webpack.config.js里面配置loader

module:{//要处理的模块
    roules:[//不同的规则处理不同的文件，所以是一个数组，每个数组的元素是一个规则对象
        {
            test:/\.css$/,//匹配后缀为css的文件，匹配到是使用这条处理规则
            use:['style-loader','css-loader']//这里有点类似函数式编程，从后往前加载执行
        }
        
    ]
}

• 配置完我们再次构建

npm run build

• 发现构建成拱了，我们在浏览器里面运行一下index.html
  

• 发现css样式添加进来了

• OK

• 但是有些情况下我们在开发的时候使用了css预编译语言怎么办呢，不懂预编译语言的，看我这篇文章一文大白话讲清楚CSS预编译语言,包括Sass,Scss,Less,Stylus

• 没关系，就是再多一个loader的事，假设我们用了scss吧，那就是先把Scss用scss-loader转css，然后用css-loader将css处理，在通过style-loader注入

2.2 sass-Loader

• 那好，我们在stylesheet目前下新建一个index.scss文件,为刚才的p标签加上红色的边框

$color:red;
.p-border{
    border:2px solid $color;
}

• 然后再main.js里面引入index.scss,并给p标签挂载类

import './stylesheet/index.scss'
p.classList.add('p-border')

• 然后下载scss-loader和sass

npm install sass-loader sass

• 然后再webpack.config.js里面配置scss-loader

module:{//要处理的模块
    roules:[//不同的规则处理不同的文件，所以是一个数组，每个数组的元素是一个规则对象
        {
            test:/\.css$/,//匹配后缀为css的文件，匹配到是使用这条处理规则
            use:['style-loader','css-loader']//这里有点类似函数式编程，从后往前加载执行
        },
        {
            test:/\.scss$/,//匹配后缀为scss的文件
            use:['style-loader','css-loader','sass-loader']
        }
        
    ]
}

• 配置完我们再次构建

npm run build

• 允许index.html,发现边框加上了
  

• 这就OK了

• 这还有一个问题，就是有时候css3的新属性在一些浏览器上不支持，我们需要加一下前缀保证兼容性，比如加上-webkit-这样的前缀。我们这就需要另外一个postcss-loader和postcss-preset-env

2.3 postcss-Loader和postcss-preset-env

• 我们安装

npm install postcss-loader postcss-preset-env

• 然后进行配置

 {
    test:/\.scss$/,//匹配后缀为scss的文件
    use:['style-loader','css-loader','sass-loader',{
           loader:'postcss-loader',
           options:{
               postcssOptions:{
                   plugins:[
                       ['postcss-preset-env']
                   ]
               }
           }
      }]
}