3、样式处理

一、样式处理的基本配置

样式处理的原因

我们写的样式不能直接在html中link，因为我们会以html为模板，这样打包的时候，css并不会单独打包到外面，所以不能直接link

所以，我们一般会把css以模块的形式引入，模块就是所谓的require等等

如何引入模块样式

上述我们说到css是要以模块形式引入的，那么直接引入就够了吗？显然不是。我们需要用到样式处理的相关loader：

- style-loader 
- css-loader
- 其他loader，比如less-loader

loader的特点

1. 功能单一，这样就可以多个loader组合使用。(这就是为什么样式需要使用多个loader的原因)
2. loader的默认顺序是先写后执行(从右往左，从下往上)

style-loader和css-loader的区别

1. css-loader: 负责解析类似@import等语法的
2. style-loader：负责把css插入到head标签中

loader用法(2种写法)

1. 样式模块引入，写在module对象中，并且配置规则rules数组

module:{//模块
	rules:[
		{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
	]
	
}

2. 配置相关的样式loader(2种写法)
   1. 只有一个loader，使用字符串；使用多个loader，用数组[]

   module:{
       rules:[
           {test:'/\.kkl$/','kkl-loader'},
           {test:'/\.less$/',use:['style-loader','css-loader','less-loader']}
       ]
   }
   

   2. 对象形式的写法，写成对象的好处是可以对loader进行配置，通过写一个options对象来配置使用loader

   module:{
       rules:[
           {
               test:'/\.less$/',
               use:[
                   {
                       loader:'style-loader',
                       options:{
                           inertAt:'top'//如果没有这个配置，那么css是插在head标签的底部的，如果自己再需要在head写一些样式来覆盖打包后的css，那么就需要让打包后的样式在head标签的上面，而不是下面，这样自己写的就能够在下面了。所以可以使用这个属性和值使得打包的样式在上面
                       }
                   },
                   'css-loader',
                   'less-loader'
               ]
           }
       ]
   }
   

注意：

style-loader中的options中的insertAt:'top’的作用是：将打包后的样式插入在html的head标签内的最上面

二、抽离CSS样式

上面只用loader去处理样式，是在html中内嵌了样式文件，相当于三种样式(行间、内嵌、外链link)中的内嵌，对于文件加载速度有影响，所以最好打包出来的是外链link的方式。这就需要抽离CSS样式。

如何抽离CSS样式

需要使用到mini-css-extract-plugin

npm i mini-css-extract-plugin -D

用法如下：

//首先引入插件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');

//然后配置plugins
plugins:[
		new HtmlWebpackPlugin({
			template:'./src/index.html',//将打包后的文件插入到该html中
			filename:'index.html',//插入后并且打包后的html文件
		}),
		new MiniCssExtractPlugin({
			filename:'main.css'//抽离出来的css的文件mingcheng 
		})
	]

//最后修改loader，把style-loader改成MiniCssExtractPlugin.loader
module:{
	rules:[
		{
			test:/\.css$/, 
			use:[
				MiniCssExtractPlugin.loader,//表示把编译完成的css用link的方式插到HTML中
				'css-loader'
			]
		},
		{
			test:/\.less$/, 
			use:[
				MiniCssExtractPlugin.loader,//表示把编译完成的css用link的方式插到HTML中,
				'css-loader',
				'less-loader'
			]
		}
	]
	
}

三、自动添加浏览器前缀

为了让样式兼容各类浏览器，需要实现自动添加浏览器前缀。那么可以使用如下配置：

    npm i postcss-loader autoprefixer -D

postcss-loader使用方法

1. 在css-loader之前就应该添加前缀了，所以，我们应该这么写：

module:{
	rules:[
		{
			test:/\.css$/, 
			use:[
				MiniCssExtractPlugin.loader,//表示把编译完成的css用link的方式插到HTML中
				'css-loader',
				'postcss-loader'
			]
		},
		{
			test:/\.less$/, 
			use:[
				MiniCssExtractPlugin.loader,//表示把编译完成的css用link的方式插到HTML中,
				'css-loader',
				'postcss-loader',
				'less-loader'
			]
		}
	]
	
}

2. 创建配置文件postcss.conifg.js

module.exports = {
	plugins:[require('autoprefixer')]//告诉这个插件，需要使用autoprefixer去自动添加前缀
}

对分离的css进行压缩

需要使用optimize-css-assets-webpack-plugin插件，但是使用这个插件必须要使用压缩js的插件uglifyjs-webpack-plugin

1. 安装插件（这两个插件都是在生产环境使用的）

npm i optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D

2. 配置

//第一步：引入optimize-css-assets-webpack-plugin 和 uglifyjs-webpack-plugin插件
let optimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
let UglifyJsPlugin = require("uglifyjs-webpack-plugin");

//第二部：添加优化项
module.exports = {
    optimization:{//优化项
		minimizer:[
			new UglifyJsPlugin({
				cache: true,//是否缓存
				parallel: true,//是否并行打包，就是同时压缩多个
				sourceMap: true//源码映射
			}),
			new OptimizeCssAssetsPlugin({})
		]
	},
}

3. 以上配置在生产环境下会报错，因为还没对js进行处理，使用babel配置就可以解决