webpack样式css处理

css代码块
安装css-loader style-loader插件
npm install less-loader --save --dev
npm install style-loader --save --dev
功能

• style-loader 把css插入到head的标签中
• loadder的特点 希望单一
• loader的用法 字符串只用一个loader
• 多个loader需要用[]数组
• loader的顺序 ，默认是从右向左执行 从下到上执行
• loader还可以写成对象方式
  代码
  module:{//模块
  //loader
  rules:[//规则 css-loader 解析@import这种语法的
  {
  test:/.cssKaTeX parse error: Expected 'EOF', got '}' at position 298: …] }̲ ] …/,
  use:[
  {
  loader:‘style-loader’,
  options:{
  insertAt:“top”
  }
  },
  ‘css-loader’
  ]
  },
  {
  //可以处理less文件 less less-loader
  test:/.less$/,
  use:[
  {
  loader:‘style-loader’,
  options:{
  insertAt:“top”
  }
  },
  ‘css-loader’,//@import 解析路径
  ‘less-loader’//把less–>css
  ]
  }
  ]
  }
  需要其他插件亦如此操作即可；例如：sass stylus node-sass sass-loader 等等

样式处理

安装抽离css插件mini-css-extract-plugin
npm install mini-css-extract-plugin --save --dev

引入：webpack.config.js中
let MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);

let path = require(‘path’);
let HtmlWebpackPlugin = require(‘html-webpack-plugin’);
let MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
module.exports = {
devServer:{//开发服务器的配置
port:5000,
progress :true,
contentBase:"./disk",
// open:true
},
mode : “development”,
entry : “./src/index.js”,
output:{
filename:“bundle[hash:5].js”,
path:path.resolve(__dirname,“disk”)
},
plugins:[
new HtmlWebpackPlugin({
template:’./src/index.html’,
fimename:‘index.html’,
minify:{//最小化 压缩index.html文件
removeAttributeQuotes:true,//去掉双引号
// collapseWhitespace:true,//折叠空行
},
hash:true//加上hash时间挫 用于区分变化
}),
new MiniCssExtractPlugin({
template:‘mian.css’
})
],
module:{//模块
rules:[
{
test:/.cssKaTeX parse error: Expected 'EOF', got '}' at position 141: … ] }̲, {…/,
use:[
MiniCssExtractPlugin.loader,
‘css-loader’,
‘less-loader’
]
}
]
}
}

将所有的less css文件都打包到mian.css文件中,但是css文件并未压缩如图：
css样式前加前缀
这里引入插件：
postcss-loader autoprefixer
npm install postcss-loader autoprefixer --save --dev
“postcss-loader” 这个放在“css-loader”的下面
并配有配置文件使用：
postcss.config.js文件内容：

module.exports = {
    plugins:[require('autoprefixer')]
}

npm run build

压缩样式文件
1.压缩样式的插件：optimize-css-assets-webpack-plugin 此插件使用后js文件就不会压缩了，这里需要配合使用压缩js的插件，如下：
2.与之配合使用压缩js的插件：uglifyjs-webpack-plugin

1.css压缩插件的使用

let OptimizeCssAssetsWebpackPlugin = require(‘optimize-css-assets-webpack-plugin’);