简单理解webpack处理css-白红宇

引入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类名                }            }]        }]    }复制代码

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