您现在的位置是:首页 > 正文

webpack-css打包超详解 ( 分离 & 压缩 )

2023-12-01 06:00:24阅读 6

零 功能简介

webpack是一款模块化打包软件,通过插件和加载器的配置,它可以对html,js,css进行分离打包和压缩。

分离打包插件会将 CSS 提取到单独的文件中,为每个包含 CSS 的 JS 文件创建一个 CSS 文件。

压缩会将css文件进行压缩,如注释压缩和格式压缩,选择器精简等。

其中html通过插件HtmlWebpackPlugin完成,js默认压缩,这里重点讲一下css,因为呆头鹅在配置过程中遇到了多个问题报错。

报错分两种:

  • webpack版本与所用插件不兼容
  • 所用插件之间不兼容

css的打包和压缩配置相关四个插件。

首先上总结:

低版本用extract-text-webpack-plugin分离打包,optimize-css-assets-webpack-plugin压缩,高版本使用MiniCssExtractPlugin分离打包,css-minimizer-webpack-plugin压缩。

一 extract-text-webpack-plugin

首先引入该依赖。

npm install extract-text-webpack-plugin --save-dev

在wabpack配置文件中引入并配置。

var Ex = require('extract-text-webpack-plugin');
module.exports = {
    ...
	// ...省略
	module: {
  		loaders: [{
    		test: /\.css/,
    		loader: Ex.extract('style-loader', 'css-loader','less-loader')  
            // 单独打包出CSS,这里配置注意下
  		}]
	},
	plugins: [
  		new Ex("[name].css")
	]
    ...
}

然后打包编译。

npm run build

这里存在一个问题,就是高版本不兼容问题,文档上写着4x后不兼容,实际呆头鹅使用的是3.3.12版本,也是不兼容的。

不兼容则使用另一个插件进行打包。

二 MiniCssExtractPlugin

引入后配置,这里需要注意use中不能添加style-loader。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    ...
	module: {
    	rules: [{
        	test: /\.css$/,
        	use: [
           		MiniCssExtractPlugin.loader,
           		'css-loader'
        	]
    	}]
	},
	plugins: [
  		new MiniCssExtractPlugin()
	]
    ...
}

如果使用了MiniCssExtractPlugin的方式抽离css,在后面配置压缩css时就需要使用对应的css-minimizer-webpack-plugin。

三 css-minimizer-webpack-plugin

npm i css-minimizer-webpack-plugin -D
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
    ...
	plugins: [
		...,
		new CssMinimizerWebpackPlugin()
	]
	...
}

四 optimize-css-assets-webpack-plugin

如果使用的是第一种打包插件extract-text-webpack-plugin,就可能需要插件optimize-css-assets-webpack-plugin,同时使用cssnano进行压缩。

安装依赖。

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

引用插件。

module.exports = {
    ...
	plugins: [
		...,
		new OptimizeCSSAssetsPlugin({
			assetNameRegExp: /.css$/g,
			cssProcessor: require('cssnano')
		})
	]
    ...
}
文章来源:https://blog.csdn.net/weixin_45809580/article/details/118282429
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:https://www.dflian.com/184965.html

网站文章

  • s7-200通信测试软件,S7-200 SMART 与调试助手之间 TCP 通信[技术学习]

    《S7-200 SMART 与调试助手之间 TCP 通信[技术学习]》由会员分享,可在线阅读,更多相关《S7-200 SMART 与调试助手之间 TCP 通信[技术学习](13页珍藏版)》请在人人文库网上搜索。1、S7-200 SMART 与调试助手之间 TCP 通信TCP 协议通信TCP 通信为面向连接的通信,需要双方都调用指令以建立连接及交换数据。S7-200 SMART 与 TCP&...

    2023-12-01 06:00:21
  • macOS python安装nodejs

    macOS python安装nodejs

    因为jupyter lab上面无法展示plotly绘制的图片,查了一下是因为没有相关插件,需要安装nodejs来填坑;先回顾一下python(我用的是anaconda)安装包的方法:pip insta...

    2023-12-01 06:00:16
  • HDU2665 主席树原理解决静态区间第K大值问题总结  有详细图解和代码解释

    HDU2665 主席树原理解决静态区间第K大值问题总结 有详细图解和代码解释

    主席树的详解,觉得好就点个赞~

    2023-12-01 05:00:35
  • Linux基础——Shell编程之条件语句

    Linux基础——Shell编程之条件语句

    测试表达式是否成立,若成立返回0(正常),否则返回其他数值(非零值都为异常)格式1:[ 表达式1 ] 操作符 [ 表达式2 ]…语法:[ 整数1 操作符 整数2 ]语法:[ 操作符 文件或目录 ]格式2:命令1 操作符 命令2…格式1: test 条件表达式。格式2: [ 条件表达式 ]

    2023-12-01 05:00:30
  • 前端H5页面在真机调试查看请求接口的插件

    前端H5页面在真机调试查看请求接口的插件

    安装:npm i vconsolenpm i vconsole然后在main.js文件添加代码:import Vconsole from 'vconsole';const VConsole = new Vconsole();// console.log(VConsole);然后运行页面就可以看到调试的小窗口了打开之后是这样的成功!...

    2023-12-01 05:00:26
  • 泛型类相关

    泛型类相关

    泛型类相关

    2023-12-01 05:00:20
  • pdfPCell中设置单元格 setRowspan()与setColspan(),setPadding(),setBorder()

    pdfPCell中设置单元格 setRowspan()与setColspan(),setPadding(),setBorder()

    打印pdf格式:打印的表格如下:

    2023-12-01 05:00:14
  • java报错--org.springframework.beans.factory.BeanCreationException

    java报错--org.springframework.beans.factory.BeanCreationException

    org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'bookControll...

    2023-12-01 04:00:28
  • 溢出原理《转》

    其实所谓溢出原理:即是数据存储过程中超过数据结构所能容纳的实际长度都可成为溢出。我认为要浅显读懂该文必须了解计算机语言,计算机数制相关知识。如果要深入研究溢出则必须深入学习计算机程序设计相关知识,比如计算机数据结构,计算机编译原理,微机接口与组成原理等等。这里取前者,浅显谈谈计算机语言,计算机数制相关知识。一。浅谈计算机语言众所周知,计算机是0,1的二进制数字世界,所谓电子计算机乃是用电的低电平表

    2023-12-01 04:00:24
  • 局部性原理

    局部性原理

    cpu cache结构 内存>L3>L2>L1多级缓存 这四级的速度是越来越快 本质上内存是一个大的一维数组二维数组在内存中按照行排列,先放a【0】再放a【1】 第一种arr1的遍历...

    2023-12-01 04:00:21