webpack的css处理

webpack打包处理css的时候需要两个loader:

style-loader 和css-loader

安装：

 npm install style-loader css-loader --save-dev

style-loader：负责将打包生成的代码嵌入到html页面中.

css-loader:是允许将css文件引入到.js文件中；

简单的打包css的webpack.config.js文件：

 var path = require('path')
 module.exports = {
     entry:{
         app:'./src/app.js'
     },
     output: {
         path:path.resolve(__dirname,'dist'),
         publicPath: "./dist/",
         filename: "[name].bundle.js"
     },
     module:{
         rules:[
             {
                 test:/\.css$/,
                 use:[
                     {
                         loader:'style-loader',//在html页面中插入<style>标签；
                         // options:{
                         //     insertInto:'#app',//将打包成的style标签插入app
                         //     singlleton:true,//只生成一个style标签
                         //     transfrom:'./css.transform.js'//css的变形，它会在打包生成的标签插入html页面的时候生效，因此还可以获取浏览器的相关信息
                         // }
                        // loader:'style-loader/url'//会在头部插入<link>标签//如果打包多个文件会生成 多个link，影响性能，推荐使用上一种；
                         //loader:"style-loader/useable"//控制样式插入或者不插入页面中；

                     },
                     {
                         loader:'css-loader',
                         // loader:'file-loader',
                         options:{
                             minimize:true,
                             modules:true//开启了modules，在js中引入css文件以后，就可以导出css文件，点.出css文件中的内容；
                         }
                     }
                 ]
             }
         ]
     }
 }

style-loader:有一个options配置，包括：

　　1.inserAt:形成的标签插入的位置；

　　2.insertInto:插入到dom

　　3.singleton:true/false是否只使用一个style标签

　　4.transform:转化，是在浏览器环境下生效，插入页面之前；可以进行和浏览器相关的页面样式操作

如：css.transform.js文件：

 module.exports = function (css) {
     console.log(css)
     console.log(window.innerWidth)
     if(window.innerWidth >= 768){
         return css.replace('red','green')
     }else{
         return css.replace('red','orange')
     }
 }

style-loader的两个同类：

　　1.style-loader/url：是将打包的代码以Link的形式插入到页面中；

　　2.style-loader/useable：是否允许插入引入的文件，在.js中使用

css的options配置项：

　　1.alias(解析的别名）

　　2.importLoader(@import)

　　3.Minimize(是否压缩）

　　4.modules(启用css-modules)

css-Modules的参数：

　　1.：local

　　2.global

　　3.compose

　　4.compose...from path

compose使用代码：

 .box  {
     composes: bigBox from './common.css';//为了优先级，默认将引入的写入到括号中的第一行
     width: 200px;
     height: 200px;
     background: skyblue;
     border-radius:5%;
 }

less与sass配置：

安装：

 npm install less-loader less --save-dev
 npm install sass-loader node-sass --save-dev

配置代码：

  rules:[
             {
                 test:/\.less$/,
                 use:[
                     {
                         loader:'style-loader',//在html页面中插入<style>标签；
                         // options:{
                         //     insertInto:'#app',//将打包成的style标签插入app
                         //     singlleton:true,//只生成一个style标签
                         //     transfrom:'./css.transform.js'//css的变形，它会在打包生成的标签插入html页面的时候生效，因此还可以获取浏览器的相关信息
                         // }
                        // loader:'style-loader/url'//会在头部插入<link>标签//如果打包多个文件会生成 多个link，影响性能，推荐使用上一种；
                         //loader:"style-loader/useable"//控制样式插入或者不插入页面中；

                     },
                     {
                         loader:'css-loader',
                         // loader:'file-loader',
                         options:{
                             minimize:true,
                             modules:true//开启了modules，在js中引入css文件以后，就可以导出css文件，点.出css文件中的内容；
                         }
                     },
                     {
                         loader:'less-loader'
                     }
                 ]
             }
         ]

二.提取css ----- 使用插件

　　安装：

 npm install --save-dev extract-text-webpack-plugin

使用：

 const ExtractTextPlugin = require("extract-text-webpack-plugin");

 module.exports = {
   module: {
     rules: [
       {
         test: /\.css$/,
         use: ExtractTextPlugin.extract({
           fallback: "style-loader",
           use: "css-loader"
         })
       }
     ]
   },
   plugins: [
     new ExtractTextPlugin("styles.css"),
   ]
 }