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

Loader打包样式

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

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

这是因为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部分

这个标签就是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']
      },

可以运行成功，但是网页上没有起作用。

在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的插件，运行项目
在网页上查看样式

自动的就多了webkit前缀的厂商前缀，这个就是postcss中对应的autoprefixer这个插件添加的厂商前缀
具体的很多用法可以参考官网。