简单理解webpack处理css4.在webpack.config.js中改变一下出口文件的配置，然后重新打包就可以了。

引入css

style-loader 创建style标签，标签里面的内容就是css内容
css-loader 让js文件里import一个css进来，给css做一个包装，让js可以解析css代码

使用

1.安装cnpm install style-loader css-loader --save-dev
2.在webpack.config.js进行配置：

var path = require("path");

module.exports = {
    entry: {
        "pageA": "./src/pageA.js",
    },
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "[name].js",
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }]
            }
        ]
    }
}

3.在使用的js文件中引入相应的css文件（注意文件路径）

  import './css/base.css'

4.注意在html文件中引入js的时候，是我们打包好的js文件哦！

5.接下来我们打包生成可以看到页面结构中用一个style标签生成

不常用的功能：

一、 style-loader/url ：可以使页面中不仅仅插入一个style标签，也可以插入一个link标签

1.我们现来改变之前的webpack.config.js的配置：

   module: {
     rules: [{
         test: /\.css$/,
         use: [{
             loader: "style-loader/url"
         }, {
             loader: "file-loader"
         }]
     }]
 }

2.安装 cnpm install file-loader ---save-dev
3.此时我们直接打包后会报一个错误，打包后的文件在dist文件目录下，引得文件并不是；

4.在webpack.config.js中改变一下出口文件的配置，然后重新打包就可以了。

output: {
      path: path.resolve(__dirname, "./dist"),
      publicPath:"./dist/",
      filename: "[name].js",
  },

这个弊端是插入多个样式，多个css打包的时候，会产生多个link标签，会产生多的网络请求，只是一个小众功能哦，大家了解即可！

二、 style-loader/useable
1.webpack.config.js的配置：

module: {
      rules: [{
          test: /\.css$/,
          use: [{
              loader: "style-loader/useable"
          }, {
              loader: "css-loader"
          }]
      }]
  }

2.在引入的js文件中，会产生use()和unuse()两个方法，用来控制页面插入或者是不插入页面当中，下面这个是一个简单的小效果：

import base from './css/base.css';


let flag = false;


setInterval(function() {
   if (flag) {
       base.unuse()
   } else {
       base.use()
   }

   flag = !flag;
}, 1000)

style-loader参数：

insertAt(插入位置)
insertInto(插入到某一个dom中)
singleton(是否使用一个style标签)
transform(转化，浏览器环境下，插入页面前)
1.在webpack配置中：

module: {
        rules: [{
            test: /\.css$/,
            use: [{
                loader: "style-loader",
                options: {
                    insertInto: "#app", //插入#app内
                    singleton: true, //多个style标签合为一个
                    transform: "./css.transform.js" //css变形的函数，相对webpack.config.js相对路径,不是在打包的时候运行，是在style-loader帮我们把样式塞到里面执行，运行的时机是在浏览器环境下，可以拿到浏览器相关的参数，根据浏览器对css做一些形变,import有几个这个函数就执行了几次，对每一个文件都会执行一次
                }
            }, {
                loader: "css-loader"
            }]
        }]
    }

2.给大家简单看一下打包后的效果：

insertInto: "#app", //插入#app内
singleton: true, //多个style标签和为一个
transform: "./css.transform.js" （值是一个地址） css变形的函数，相对webpack.config.js相对路径,不是在打包的时候运行，是在style-loader帮我们把样式塞到里面执行，运行的时机是在浏览器环境下，可以拿到浏览器相关的参数，根据浏览器对css做一些形变,import有几个这个函数就执行了几次，对每一个文件都会执行一次；
注意：打包后改变页面大小后，要重新刷新页面，才会有效果。

css-loader参数：

alias:(设置别名)

 alias: {
    '@': resolve('src')
  }

importLoader(@import) 后面有其他的loader要处理再使用这个属性
minimize:(是否压缩) true/false
modules（是否启用css模块化）
先来回忆一下css-modules有哪些属性：
:local 给定一个本地的样式
:global 给定一个全局的样式
compose 继承一段样式
compose ... from path 从某一个文件里面引入一个样式
简单配置：

module: {
        rules: [{
            test: /\.css$/,
            use: [{
                loader: "style-loader",
                options: {
                    singleton: true,
                }
            }, {
                loader: "css-loader",
                options: {
                    // minimize: true //css-loader 1.0.0 可以使用，2.0以上的版本不能使用
                    modules: true,
                    localIdentName: '[path][name]_[local]_[hash:base64:5]'//定义css编译出来的class类名
                }
            }]
        }]
    }

第一次写文章，请各位多多指点，不喜勿喷。每天进步一点点！谢谢大家！