Webpack-5【babel编译ES6、编译插件、全局-局部垫片】

一.Webpack处理CSS

style-loader 是为了在html中以style得方式嵌入css

css-loader 通过require的方式来引入css

编译顺序是先用css-loader将css代码编译，再交给style-loader插入到网页里面去

file-loader 将文件(一般是图片文件为主，其他的包括字体文件等)，在进行一些处理后移动打包后的目录中

module:{
    rules:[{
        test:/\.css$/,
        use:[{
            loader:'style-loader'
        },{
            loader:'css-loader'
        }],
        exclude:/(node_modules)/
    }]
}

index.js

import a from './css/a.css'

二.style-loader

style-loader:配合css-loader使用，以<style></style>形式在html页面中插入css代码

style-loader/url:以link标签形式向html页面中插入代码，采用这种方式需要将css-loader变为file-loader,但这种放使不推荐，因为如果在一个js文件中引入多个css文件会生成多个Link标签，而html每个link标签都会发送一次网络请求，所以这种放使并不建议

style-loader/useable:采用这种方式使用处理css,会有use()和unuse()两种方法，use()开启引入样式，unuse()不适用样式

module:{
    rules:[{
        test:/\.css$/,
        use:[{
            loader:'style-loader/url'
        },{
            loader:'file-loader'
        }],
        exclude:/(node_modules)/
    }]
}

配置引入路径

output:{
    path:path.resolve(__dirname,'dist'),
    filename:'[name].bundle.js',
    publicPath:'dist/'
},
module:{
    rules:[{
        test:/\.css$/,
        use:[{
            loader:'style-loader/useable'
        },{
            loader:'css-loader'
        }],
        exclude:/(node_modules)/
    }]
}

index.js

import a from './css/a.css';
let flag = false;
setInterval(()=>{
    if(flag){
        flag = false
        a.unuse()
    }else{
        flag = true
        a.use
    }
})

unuse可以去除样式

options

attrs:attrs是一个对象，以键值对出现，在<style></style>标签中以key=value出现，键值对可以自定义，但是使用时建议语义化

singleton:true 只用一个标签

insetAt:有两个值top|bottom,如果不配置insertAt则默认为bootom,当insertAt为'top'时，loader打包的css将优先已经存在的css

insertInto: 插入到指定标签

transform:函数的参数是css,这时我们拿到的css样式是以字符串的形式，所以可用replace方法修改样式，transform.js可以通过style-loader会根据需要在css未加载到的页面之前修改样式,在函数中我们可以获取到浏览器的相关信息，比如window,navigator等，这有助于我们更具相关信息修改样式

module:{
    rules:[{
        test:/\.css$/,
        use:[{
            loader:'style-loader',
            options:{
                attrs:{
                    first:1
                }
            }
        }]
    }]
}

<style fitst="1" type="text/css">
    html{
        background-color-yellow;
    }
</style>

其它配置和文字描述一致

css.transform.js

module.exports = function(css){
    if(window.innerWidth >= 900){
        return css.replace('yellow','blue')
    }else{
        return css.replace('yellow','green')
    }
}

三.css-loader

Minimize:true or false,是否开启css代码压缩，比如压缩空格不换行。

modules:是否开启css-modules

localIdentName:

[path]:路径

[name]:文件名

[local]:样式名

[hash:5]文件的标记

Compose来组合样式

index.js

import a from './css/a.css'
document.getElementById('app').className = a.box1

a.css中有box1类名

{
    loader:'css-loader',
    options:{
        modules:true,
        localIndentName:"[path][name]-[local]-[hash:5]"
    }
}

名称就变为了模块化后得类名

compose

a.css

.box1{
    composes:box2 from './b.css';
    width:400px;
    height:400px;
    background-color:red;
}

这样并无法压缩

{
    loader:'css-loader',
    options:{
        modules:true,
        minimize:true
        localIndentName:"[path][name]-[local]-[hash:5]"
    }
}

切换为0版本才可以

npm uninstall css-loader
npm i css-loader@0 -D