webpack的样式处理

样式处理

1、 配置loader模块，先安装

npm install css-loader style-loader -D 
yarn add less-loader style-loader -D 

css-loader 是解析 @import 这种语法的
style-loader 是把 css 插入到 head 标签中
loader 的特点：希望单一
多个loader需要 用数组表示 []，loader还可以写成对象方式
loader的顺序，默认是从右向左，从下向上执行
在 _webpack.config.js_里进行 _module_配置

module:{ //模块
        rules: [    
            {
                test:/\.css$/,
                // use: ['style-loader','css-loader'],
                //或者以下写法
                use:[
                    {
                        loader: 'style-loader',
                        options:{
                            insertAt:'top' //使style插入到顶部上面
                        }
                    },
                    'css-loader'
                ]
            },
            {
                test:/\.less$/, //处理less文件
                use:[
                    {
                        loader: 'style-loader',
                        options:{
                            insertAt:'top' //使style插入到顶部上面
                        }
                    },
                    'css-loader', //@import 解析路径
                    'less-loader' //把less -> css
                ]
            }
        ]
    }

2、抽离css插件

yarn add mini-css-extract-plugin -D
//在webpack.config.js中引入
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
plugins:[ 
		new MiniCssExtractPlugin({
            filename:'main.css'
        })
]

//添加css浏览器兼容的前缀的插件
yarn add postcss-loader autoprefixer -D

//压缩css
    yarn add optimize-css-assets-webpack-plugin -D
    let optimizeCss = require('optimize-css-assets-webpack-plugin')
//用此之后必须还要对js也压缩一下
     yarn add uglifyjs-webpack-plugin -D

今天开始学习的时间晚了点，学习的过程中遇到了个错，还未解决出来，就先只更新到这里吧