webpack核心概念_（第三章）_使用Loader打包静态资源（样式篇-上）

深碍√TFBOYSˉ_ 2022-10-03 00:43 188阅读 0赞

## Loader打包样式 ##

当我们在src下写一个样式文件，并在index.js中引入使用该文件的样式，运行发现出错

import './index.css'
    ......
    img.classList.add('image')

![在这里插入图片描述][20190622160131732.png]  
这是因为webpack只能识别js结尾的文件，不能识别css结尾的模块，所以打包会报错。所以需要在webpack.config.js中做配置  
当我们打包css的时候，需要用到两个loader，所以use就不能是对象了，要变成数组的形式

{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
          },

在命令行中安装这个style-loader、css-loader这两个包 `npm install style-loader css-loader -D`  
然后在打包npm run bundle 就可以打包成功  
style-loader、css-loader的作用是什么  
css-loader会帮我们分析出几个css文件之间的关系，最终把这些css文件合并成一段css。  
style-loader的作用是在得到css-loader生成的css内容之后，style-loader会把这段内容挂载到页面的head部分  
![在这里插入图片描述][20190622163441667.png]  
这个标签就是style-loader挂载上来的。所以说在处理css文件打包的时候，要用css-loader配合style-loader一起来使用，应该怎么做呢  
有时候我们在文件中不想使用css，而是使用less、sass、stylus等等css预处理器，该怎么做呢？  
我们将样式改为sass的形式

body {
      .image {
        width: 150px;
        height: 150px;
      }
    }

然后在index.js中引用`import './index.scss'`，在webpack.config.js中配置改为scss结尾

{
            test: /\.scss$/,
            use: ['style-loader', 'css-loader']
          },

可以运行成功，但是网页上没有起作用。  
![在这里插入图片描述][20190624152446918.png]  
在head中根本不是css语法，而是原始的sass语法，浏览器不能识别  
所以当我们去打包scss文件的时候,需要借助其他loader来把sass的语法翻译成css的的语法，我们要使用sass-loader

{
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
          },

这个运行会报错，这是因为安装 sass-loader的时候必须安装node-sass `npm install sass-loader node-sass -D`  
安装完就可以了  
从上面的配置中可以看出，以scss结尾的文件有三个loader的配置

{
            test: /\.scss$/,
            use: [
              'style-loader', 
              'css-loader', 
              'sass-loader'
            ]
          },

在webpack的配置里面，loader是有先后顺序的，顺序是从下到上，从右到左，所以去打包一个scss文件的时候，首先会执行sass-loader，对sass代码进行翻译，翻译成css代码之后给到css-loader，处理好之后再给到style-loader，最后挂在到页面上。  
当我们在页面使用新的css语法的时候

body {
      .image {
        width: 150px;
        height: 150px;
        transform: translate(100px, 100px)
      }
    }

在写css3新特性的时候，一般要加前缀，表明厂商，-webkit-transform,-m 之类的，在css里面去写这些厂商前缀会比较麻烦，有一些其他的loader会帮助我们实现这种自动添加厂商前缀的功能，这个loader叫做postcss-loader  
**postcss-loader的使用**  
首先安装： npm i -D postcss-loader  
安装`npm install autoprefixer -D`  
在目录下创建postcss.config.js的配置文件，在里面做一些配置

module.exports = {
      plugins: [
        require('autoprefixer')
      ]
    }

postcss-loader有一个配置文件postcss.config.js，当它被引用或者打包的时候要使用postcss-loader，会去使用autoprefixer的插件，运行项目  
在网页上查看样式  
![在这里插入图片描述][20190625102814868.png]  
自动的就多了webkit前缀的厂商前缀，这个就是postcss中对应的autoprefixer这个插件添加的厂商前缀  
具体的很多用法可以参考官网。

[20190622160131732.png]: /images/20220109/27e08d521f7f4d919fa26889be6ba3c0.png
[20190622163441667.png]: /images/20220109/0dfc56780433409183ef6a06e40774de.png
[20190624152446918.png]: /images/20220109/22d4188f602d4e56ab7d51a20fc18204.png
[20190625102814868.png]: /images/20220109/fb5eccfdc0914a04b196d58500fff945.png