样式处理
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
今天开始学习的时间晚了点,学习的过程中遇到了个错,还未解决出来,就先只更新到这里吧