[散修弟子]JS-2250|2020年08月22日的日报-技能树.IT修真院

发表于： 2020-08-22 23:59:30

2 2264

【日报格式】

今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）

总结目前知道的webpack css和JS 兼容方式

CSS兼容

需要先安装 npm i -D postcss postcss-loader postcss-preset-env mini-css-extract-plugin

PostCss只是将样式源码编译成最终CSS代码,做代码分析之类的事,最后将分析结果交给插件,它本身没什么用,需要下载插件配合

配置 webpack.config.js

module.exports = {
    mode: "development",
    module: {
        rules: [{
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"]
        }]
    },
    plugins: [
        new MiniCssExtractPlugin()
    ]
}

安装好postcss-preset-env 创建postcss.config.js文件为插件配置

module.exports = {    
    map: false, //关闭source-map    
    plugins: { 
        "postcss-preset-env": {            
               stage: 0,//默认为2,0-4对哪个阶段css语法进行兼容处理            
               preserve:false,//编译后可不可以看到看到原语法        
               }    
         } 
}
   这个插件还可以调整兼容的浏览器范围 创建文件.browserslistrc写配置内容
   "last 2 version", //兼容最近期的两个版本    
   "> 1% in CN", //匹配中国大于1%的人使用的浏览器,in CN可省略    
   "not ie <= 8" //排除掉版本号小于等于8的IE浏览器

mini-css-extract-plugin //库提供1个plugin和 1个loader  

plugin //负责生成css文件 

loader //负责记录要生成的css文件的内容

//先分析依赖模块,如果匹配到后缀名以.less结尾,loader处理

//先将匹配到的内容交给postcss-loader处理,将处理后的css代码交给css-loader处理成JS字符串返回 交给MiniCssExtractPlugin输出成css文件

PS:
//如果css-loader 的modules设置为true 就会开启 css module规范
//主要是解决类名冲突问题,可以理解为将类名转换为hasn,返回一个对象,对象中的键是原本类名,值是对应生成的hash

处理图片的库

npm i -D file-loader   //将文件的导入结果变成url地址,同时将导入的文件生成到输出目录

{test: /\.png$/, use: "file-loader"}]} //loader配置

//写这个图片主要是如果生成的css文件内原本依赖img的图片地址是img/图片.jpg

//但最后的css因为一些原因设置到了根目录的css文件夹下,因为相对路径在css文件夹下找不到img文件夹,发生错误,这时候只需要更改module.exports 中 output 的 publicPath:"/" 设置成绝对路径就好了

JS兼容

npm i -D "@babel/core" babel-loader "@babel/preset-env" 
安装生产环境依赖 npm i core-js  regenerator-runtime

//module.exports中的module rules: [{ test: /\.js$/, use: "babel-loader" }]

创建.babelrc文件并配置
{
    "presets": [//有哪些预设
        ["@babel/preset-env", {
            "useBuiltIns": "usage",
            "corejs": 3
        }]
    ],
    "plugins": [] //有哪些插件
}
使用babel转换async和await会用到regenerator-runtime这个库
是因为async和await需要转换为生成器,但生成器的语法也属于新语法,也要转换,
转换生成器需要用到regenerator-runtime 这个库