lyz自学笔记


文章目录
一、提取css文件成单独文件
二、css兼容性处理
三、压缩css文件


提示：以下是本篇文章正文内容，下面案例可供参考
一、提取css文件成单独文件
1、例如当项目中有多个css文件，在生成环境中可以将所有css文件提取出来成为一个单独的css文件

2、创建两个css文件
	/*a.css*、
	#box1 {
	  width: 100px;
	  height: 100px;
	  background-color: black;
	}

	/*b.css*/
	#box2 {
	  width: 200px;
	  height: 200px;
	  background-color: red;
	}

3、创建一个index.js文件引入a.css和b.css，并创建index.html使用样式

4、配置webpack-config.js文件
	const {resolve} = require('path')
	const HtmlWebpackPlugin = require('html-webpack-plugin')
	//引入提取css的插件
	const Minicssextractplugin = require('mini-css-extract-plugin')
	
	// process.env.NODE_ENV = 'development'
	
	module.exports = {
	  entry: './src/js/index.js',
	  output: {
	    filename: "js/built.js",
	    path: resolve(__dirname , 'build')
	  },
	  module: {
	    rules: [
	      {
	        test:/\.css$/,
	        use:[
	            // 'style-loader'
	            //这个loader取代style-loader。作用：提取js中的导入的css资源
	          Minicssextractplugin.loader
	          ,'css-loader',
	        ]
	      }
	    ]
	  },
	  plugins:[
	    new HtmlWebpackPlugin({
	      template:'./src/index.html'
	    }),
	    //使用mini-css-extract-plugin这个插件提取css文件成为一个的css
	    new Minicssextractplugin({
	      //提取到css目录下生产一个built.css文件
	      filename: 'css/built.css'
	    })
	  ],
	  mode:'development'
	}

5、提取css成为单独文件需要下载插件：mini-css-extract-plugin
	npm i mini-css-extract-plugin -D


二、css兼容性处理
1、在上面的代码基础上处理css兼容性问题

2、处理兼容性的问题需要使用另一个插件postcss：postcss-loader和postcss-preset-env
	npm i postcss-loader postcss-preset-env

3、在上面的webpack-config.js中继续配置
	const {resolve} = require('path')
	const HtmlWebpackPlugin = require('html-webpack-plugin')
	const Minicssextractplugin = require('mini-css-extract-plugin')
	
	// process.env.NODE_ENV = 'development'
	
	module.exports = {
	  entry: './src/js/index.js',
	  output: {
	    filename: "js/built.js",
	    path: resolve(__dirname , 'build')
	  },
	  module: {
	    rules: [
	      {
	        test:/\.css$/,
	        use:[
	            // 'style-loader'
	          Minicssextractplugin.loader
	          ,'css-loader',
	          /*
	          	css兼容性处理：postcss --> postcss-loader postcss-preset-env
	          	postcss-preset-env：帮助postcss找到package.json中browserlist里面的配置，通过配置加载指定的css兼容性样式
	          */
	          //配置loader
	          //方式一：使用loader的默认配置
	          //‘postcss-loader’
	          //方式二：修改loader的配置
	          {
	            loader: "postcss-loader",
	            //loader的配置
	            options: {
	              ident:'postcss',
	              plugins:()=>[
	                  //postcss的插件
	                  require('postcss-preset-env')()
	              ]
	            }
	          }
	        ]
	      }
	    ]
	  },
	  plugins:[
	    new HtmlWebpackPlugin({
	      template:'./src/index.html'
	    }),
	    new Minicssextractplugin({
	      filename: 'css/built.css'
	    })
	  ],
	  mode:'development'
	}

4、因为在插件中使用了postcss-preset-env，它会帮助postcss找到package.json中browserlist里面的配置，通过配置加载指定的css兼容性样式，所以我们要在package.json中配置browserslist
	  "browserslist": {
	    "development": [
	      "last 1 chrome version",	//兼容最近的谷歌浏览器版本
	      "last 1 firefox version",
	      "last 1 safari version"
	    ],
	    "production": [
	      ">0.1%",		//大于99%的浏览器
	      "not dead",	//不用死的浏览器
	      "not op_mini all"		//不用op_mini
	    ],

5、可以使用process.env.NODE_ENV = 'development|production’指定开发模式

三、压缩css文件
1、在以上代码上继续

2、压缩css文件需要使用一个插件：optimize-css-assets-webpack-plugin

3、导入此插件
	const Optimizecssassetswebpackplugin =require('optimize-css-assets-webpack-plugin')

4、使用插件
	const {resolve} = require('path')
	const HtmlWebpackPlugin = require('html-webpack-plugin')
	const Minicssextractplugin = require('mini-css-extract-plugin')
	const Optimizecssassetswebpackplugin =require('optimize-css-assets-webpack-plugin')
	
	// process.env.NODE_ENV = 'development'

	module.exports = {
	  entry: './src/js/index.js',
	  output: {
	    filename: "js/built.js",
	    path: resolve(__dirname , 'build')
	  },
	  module: {
	    rules: [
	      {
	        test:/\.css$/,
	        use:[
	            // 'style-loader'
	          Minicssextractplugin.loader
	          ,'css-loader',
	          {
	            loader: "postcss-loader",
	            options: {
	              ident:'postcss',
	              plugins:()=>[
	                  require('postcss-preset-env')()
	              ]
	            }
	          }
	        ]
	      }
	    ]
	  },
	  plugins:[
	    new HtmlWebpackPlugin({
	      template:'./src/index.html'
	    }),
	    new Minicssextractplugin({
	      filename: 'css/built.css'
	    }),
	    new Optimizecssassetswebpackplugin()
	  ],
	  mode:'development'
	}

压缩后的css文件大小会非常小

@echo off
::如果E盘没有Output文件夹，创建Output。
if not exist "F:\test\d" mkdir "F:\test\d"
::将目的里面的所有文件和文件夹压缩成单独的压缩文件，并放到E:\Output。
for /f "usebackq tokens=1* delims=/" %%a in (`dir /b "F:\test\s"`) do D:\软件\rar\winrar.exe a -x*.jar -df -ibck -ep1 -r0 -exit -- "F:\test\d\%%a.rar" "F:\test\s\%%a"

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

winrar主要参数

用法:     rar <命令> -<开关 1> -<开关 N> <压缩文件> <文件...>
               <@列表文件...> <解压路径">
<命令>
a             添加文件到压缩文件
c             添加压缩文件注释
cf            添加文件注释
cw            写入压缩文件注释到文件
d             删除压缩文件中的文件
e             解压压缩文件到当前目录
f             刷新压缩文件中的文件
i[参数]=<串> 在压缩文件中查找字符串
k             锁定压缩文件
l[t,b]        列出压缩文件[技术信息,简洁]
m[f]          移动到压缩文件[仅对文件]
p             打印文件到标准输出设备
r             修复压缩文件
rc            重建丢失的卷
rn            重命名压缩文件
rr[N]         添加数据恢复记录
rv[N]         创建恢复卷
s[名字|-]     转换压缩文件为自解压格式或转换回压缩文件
t             测试压缩文件
u             更新压缩文件中的文件
v[t,b]        详细列出压缩文件[技术信息,简洁]
x             用绝对路径解压文件
<开关>
-             停止扫描
ac            压缩或解压后清除存档属性
ad            添加压缩文件名到目标路径
ag[格式]      使用当前日期生成压缩文件名
ao            添加具有压缩属性的文件
ap<格式>      添加路径到压缩文件中
as            同步压缩文件内容
av            添加用户身份校验(仅注册版本可用)
av-           禁用用户身份校验
c-            禁用注释显示
cfg-          禁用读取配置
cl            名称转换为小写
cu            名称转换为大写
df            压缩后删除文件
dh            打开共享文件
ds            对固实压缩文件禁用名称排序
e[+]<属性>    设置文件排除和包括属性
ed            不添加空目录
en            不添加"压缩文件结束"标志
ep            从名称中排除路径
ep1           从名称中排除基本目录
ep2           展开为完整路径
ep3           扩展路径为包含盘符的完全路径
f             刷新文件
hp[密码]      同时加密文件数据和文件头
id[c,d,p,q]   禁用消息
ieml[属性]    用 E-mail 发送压缩文件
ierr          发送所有消息到标准错误设备
ilog[名称]    把错误写到日志文件(只有注册版本可用)
inul          禁用所有消息
ioff          完成一个操作后关闭 PC 电源
isnd          启用声音
k             锁定压缩文件
kb            保留损坏的已解压文件
m<0..5>       设置压缩级别(0-存储...3-默认...5-最大)
mc<参数>      设置高级压缩参数
md<大小>      以KB为单位的字典大小(64,128,256,512,1024,2048,4096 or A-G)
ms[ext;ext]   指定存储的文件类型
n<文件>       仅包含指定的文件
n@            从标准输入设备读取文件名到包括
n@<列表>      在指定的文件列表包括文件
o+            覆盖已存在文件
o-            不覆盖已存在文件
oc            设置 NTFS 压缩属性
os            保存 NTFS 流
ow            保存或恢复文件所有者和组
p[密码]       设置密码
p-            不询问密码
r             递归子目录
r0            仅递归通配符名称的子目录
ri<P>[:<S>]   设置优先级(0-默认,1-最小..15-最大)和以毫秒为单位的休眠时间
rr[N]         添加数据恢复记录
rv[N]         创建恢复卷
s[<N>,v[-],e] 创建固实压缩文件
s-            禁用固实压缩文件
sfx[名称]     创建自解压压缩文件
st[名称]      从标准输入设备读取数据(stdin)
t             压缩后测试文件
ta<日期>      添加日期 <日期> 后修改的文件,日期格式 YYYYMMDDHHMMSS
tb<日期>      添加日期 <日期> 前修改的文件,日期格式 YYYYMMDDHHMMSS
tk            保留原始压缩文件时间
tl            设置压缩文件时间为最新文件时间
tn<时间>      添加 <时间> 以后的文件
to<时间>      添加 <时间> 以前的文件
ts<m,c,a>[N] 保存或恢复文件时间(修改,创建,访问)
u             更新文件
v             自动检测创建卷的大小或者列出所有的卷
v<大小>[k,b] 创建卷大小=<大小>*1000 [*1024, *1]
vd            创建容量前清除磁盘内容
ver[n]        文件版本控制
vn            使用旧风格的卷命名方案
vp            每卷之前暂停
w<路径>       指定工作目录
x<文件>       排除指定的文件
x@            从标准输入设备读取要排除的文件名
x@<列表>      排除指定列表文件中的文件
y             假设对全部询问都回答是
z<文件>       从文件读取压缩文件注释
举个例子：
1. 建立一个批处理文件，里头起作用的只有1行:)
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
BackFav.bat（名字可以随便起）文件内容：
REM 这个批处理文件是用来自动备份我的收藏夹
REM WinRAR <命令> -<开关1> -<开关N> <压缩文件> <文件...> <@列表文件...> <解压路径">
"D:"Program Files"WinRAR"WinRAR.exe" a -as -r -sfx -zsfxpara.txt -EP1 "d:"my documents"Favorites.exe" "%USERPROFILE%"Favorites"
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
参数说明：
a:                   添加指定的文件（源目录，这里是"%USERPROFILE%"Favorites"）和文件夹到压缩文件（目标文件，这里是"d:"my documents"Favorites.exe"）中。
-as:                这是一个开关，指添加方式是“同步压缩文件内容”
-r:                  表示“包含子文件夹”
-sfx:               表示建立的是一个自解压文件
-zsfxpara.txt: 从文件sfxpara.txt读取压缩文件注释，这注释有什么用后面解释
-ep1:             表示不把路径%USERPROFILE%保存在压缩文件中
2. 注释文件的作用
建立压缩文件的时候不光要考虑压缩那些文件，还要考虑怎么解压缩。通过注释文件可以向压缩包传递许多有用的信息。
sfxpara.txt内容：
PATH=%USERPROFILE%"
Silent=1

一、提取单独的css文件

前面学习的过程中，用css-loader和style-loader来处理css文件，是通过在html中创建style标签把css放进去的。如果想把css单独的打包成css文件，则不能用前面的方法。

需要用到mini-css-extract-plugin插件，去掉style-loader，具体配置如下：
//loader配置
{ 
      test: /\.css$/,
       use:[
           MiniCssExtractPlugin.loader,//loader取代style.loader,作用，提取js中的css文件
           'css-loader',
            {
                loader:'postcss-loader',
                options: {
	              publicPath: '../',
	            },
             }
       ],   
 }
//插件配置
new MiniCssExtractPlugin({
     filename: 'src/main.css', //输出的文件名字
 }),

二、兼容处理

有一些css3的属性，需要加上浏览器前缀才能兼容不同的浏览器。可以配置自动添加浏览器相关的前缀
安装 npm postcss postcss-loader postcss-preset-env
webpack.config.js
 { 
       test: /\.css$/,
       use:[
           MiniCssExtractPlugin.loader,//loader取代style.loader,作用，提取js中的css文件
            'css-loader',
            //帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
             {
                 loader:'postcss-loader',
                 options:{
                    postcssOptions: {
                        plugins: [
                                  [ require('postcss-preset-env')() ],
                             ]
                       }
                    }
              }
       ],     
}
//package.json配置
"browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "nop op_mini all"
    ]
  }

三、压缩css文件

压缩css能使得打包后的css文件变小，从而提高性能，配置如下即可
//安装 optimize-css-assets-webpack-plugin
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');//压缩css文件
new OptimizeCssAssetsWebpackPlugin()

1、打包和压缩

打包：将多个文件合并成单个文件方便管理

压缩：将单个大文件压缩进行压缩，无法压缩多个文件

2、tar命令

格式：tar [选项] [文件/目录]

选项：

-c                               创建（不能单独跟参数c）

-v                               显示过程

-f                                文件名称

-x                               解档

-t                                查看归档文件内容

-r                                添加文件归档

--get                          解档指定文件

--delete                    删除归档中指定文件

-C                              指定解档目录

-z                               同时具有gzip的属性

-j                                同时具有bzip2的属性

-J                               同时具有xz的属性

 

例：

（1）将文件进行打包





（2）将打包文件解档



（3）更新打包文件



（4）解档指定文件



 

3、压缩

zip格式

压缩：zip -r testzip.zip test.tar



解压：unzip testzip.zip



gz格式

压缩：gzip test.tar                                                            等价tar zcf test.tar.gz



解压：gunzip xxx.tar.gz                                                   等价tar zxf test.tar.gz



bzip2格式

压缩：bzip2 test.tar                                                                    等价tar jcf test.tar.bz2



解压：bunzip2 xxx.tar.bz2                                                         等价tar jxf test.tar.bz2



xz格式

压缩：xz test.tar                                                                          等价tar Jcf test.tar.xz



unxz xxx.tar.xz                                                                              等价tar Jxf text.tar.xz