【webpack】4-如何解析CSS、LESS等预处理器以及一些优化处理,提取单独文文件、兼容处理postcss,压缩

文章目录

  • css解析
    • 安装
    • 配置
  • 预处理器
  • 提取css成单独文件
    • 安装
    • 配置
  • 兼容处理
    • 安装
    • 配置
  • 压缩
    • 安装
    • 配置

css解析

乞丐版webpack想认识css需要css-loader

主要用于加载css文件,例如在main.js中引入css文件,没有css-loader的webpack是不认识的。

原理是转换成commonjs对象,本质是js,里面内容是样式字符串。

同时还需要style-loader,因为打包后的css一般都会放在页面的style标签插入到head中,webpack需要能够去读懂style标签。

安装

npm i style-loader css-loader -D

配置

然后在webpack中设置module:

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/, 
        use: [
          'style-loader', // 这个要在写在第一个,因为loader读取顺序是倒序的,而且会把结果传递给下一个loader去做处理
          'css-loader'
        ]
      } 
    ]
  }
}

预处理器

预处理器的话,就多添加相关loader即可,例如less-loader用于将less转换成css。

npm i less less-loader -D
module.exports = {
  module: {
    rules: [
      {
        test: /.css$/, 
        use: [
          'style-loader', 
          'css-loader',
        ]
      },
      {
        test: /.less$/, 
        use: [
          'style-loader', 
          'css-loader',
          'less-loader'
        ]
      }  
    ]
  }
}

提取css成单独文件

css文件最终打包后生成的资源是集成在js文件中的,如果把css单独打包成一个css文件会带来什么好处。

这里引用下掘金的一片文章【面试官:生产环境构建时为什么要提取css文件?】

文章讲了一些优点:

更好的缓存,当 CSS 和 JS 分开时,浏览器可以缓存 CSS 文件并重复使用,而不必重新加载,也不用因为js内容的变化,导致css缓存失效

更快的渲染速度,浏览器是同时可以并行加载多个静态资源,当我们将css从js中抽离出来时,能够加快js的加载与解析速度,最终加快页面的渲染速度

更好的代码可读性,独立的css文件更方便代码的阅读与调试

安装

npm i mini-css-extract-plugin -D

配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 引入相关

module.exports = {
	module: {
		rules: [
			{
				test: /.css$/, 
				use: [
					 //'style-loader', 这回不使用这个loader了
					 MiniCssExtractPlugin.loader, // 能提取js中的css成单独文件
					'css-loader',
				]
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html' 
		}),
		new MiniCssExtractPlugin({
			filename: 'css/build.css' // 默认会生成main.css文件在输出文件的位置上,可以通过filename自定义。html文件会自动用link标签引入这个.css文件。
		})
	]
}

这样减少了js文件体积,css也通过link标签去单独引入,就不会出现闪屏现象。


兼容处理

每个浏览器对一些css属性的支持情况是不一样的,需要一个postcss库的帮助,去针对性的对每个浏览器做兼容。

安装

npm i postcss-loader postcss-preset-env -D

postcss-preset-env可以通过环境的识别加载不同的配置,能够让兼容性精确到每一个浏览器的版本。

原理是帮postcss找到package.json中browserlist字段里面的配置,通过配置生成指定的css兼容样式

配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 引入相关

module.exports = {
	module: {
		rules: [
			{
				test: /.css$/, 
				use: [
					 //'style-loader', 这回不使用这个loader了
					 MiniCssExtractPlugin.loader, // 能提取js中的css成单独文件
					'css-loader',
					{
						loader: 'postcss-loader',
						options: {
							ident: 'postcss', // 固定写法,应该是表示要修改postcss
							plugins: () => { // 使用postcss的插件
								require('postcss-preset-env')() 
							}
						}
					}
				]
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html' 
		}),
		new MiniCssExtractPlugin({
			filename: 'css/build.css' // 默认会生成main.css文件在输出文件的位置上,可以通过filename自定义。html文件会自动用link标签引入这个.css文件。
		})
	]
}

同时还需要在package.json中设置

{
	"browserlist": {
	    // 开发模式可以只写自己调试用的浏览器
		"development" : [
			"last 1 chrome version" // 兼容chrome最近的一个版本
		],
		// 生产环境(默认),和webpack中mode配置无关
		"production": [
			">0.2%", // 大于0.2%的浏览器都兼容
			"not dead", // 已经淘汰的浏览器不要兼容,例如ie8
			"not op_mini all", // 所有op浏览器都不要兼容 
		]
	}
}

如果需要使用browserlist里的开发模式,需要在webpack中修改node的环境变量。

process.env.NODE_ENV = 'development' // 让这个项目在node的开发环境中运行

这样,打包后的css样式属性就会自动添加前缀来兼容不同的浏览器。在开发中可以点击元素审查看到。

browserlist字段有很多设置,可以百度。


压缩

就是压缩打包的css文件。

安装

需要安装以下插件

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

配置

const OptimizeCssAssetsWebpackPlugin = require('mini-css-extract-plugin') // 引入相关

module.exports = {
	plugins: [
		new OptimizeCssAssetsWebpackPlugin()
	]
}

可能css文件少的时候,效果不明显,但是当文件积累越来越多,优势就越来越明显。

你可能感兴趣的:(webpack,css,node.js,vue.js)