webpack继续学习-EW帮帮网

认识PostCSS工具

PostCSS是一个通过JS来转换样式的工具，这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀，css样式的重置

实现这些功能需要借助于PostCSS对应的插件

自动添加浏览器前缀需要：

npm install autoprefixer

单独的postcss配置文件

我们可以将这些配置信息放到一个单独的文件中进行管理

在根目录下创建postcss.config.js

module.exports = {
    plugins:[
        require("autoprefixer")
    ],
}

postcss-preset-env

在配置postcss-loader的时候，我们配置插件并不需要使用autoprefixer，可以使用postcss-preset-env

preset是预设的意思

postcss-preset-env也是一个postcss的插件

它可以帮助我们将一些现代的css特性转成大多数浏览器认识的css，并且会根据目标浏览器或者运行时环境添加所需的polyfill

会自动帮助我们添加autoprefixer（相当于已经内置了autoprefixer）

首先安装postcss-preset-env

npm install postcss-preset-env -D

之后我们修改掉之前的autoprefixer

Webpack打包图片-JS-Vue

css浏览器前缀在现代的前端开发模式中，不需要手动的添加浏览器前缀

加载图片案例准备

npm install file-loader

常见的使用图片的方式是两种：

img元素，设置src属性

其他元素，设置background-image的css属性

asset module type

在Webpack5之前，加载这些资源需要使用一些loader，比如说raw-loader、ul-loader、file-loader

在Webpack5开始，我们可以直接使用资源模块类型来替代上面的这些loader

资源模块类型

asset/resource发送一个单独的文件并导出URL（之前用file-loader实现）

asset/inline导出一个资源的data URL（之前用url-loader实现）

asset/source导出资源的源代码（之前用raw-loader实现）

asset在导出一个data URL和发送一个单独的文件之间自动选择（之前用url-loader并且配置资源体积限制实现）

const path = require('path');

module.exports = {
  // 设置打包的模式
  mode: 'development',
  
  // 设置入口文件
  entry: './src/index.js',
  
  // 设置输出
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  // 配置模块规则
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader", 
          "css-loader", 
          "postcss-loader"
        ]
      },{
        test: /\.less$/,
        use:[ "style-loader","css-loader","less-loader"]
      },
      {
        test:/\.(png|jpe?g|svg|gif)$/,
        type:"asset"
      }
    ]
  }
};

更改配置文件成这个样子，然后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Demo</title>
</head>
<body>
    <script src="../dist/bundle.js"></script>
</body>
</html>

// 导入图片
import imgSrc from './img/sss.png';

// 创建img元素
const imgEl = document.createElement('img');

// 设置src属性
imgEl.src = imgSrc;

// 将图片添加到body中
document.body.appendChild(imgEl);

打包后显示：

打包图片有不同的方式：

const path = require('path');

module.exports = {
  // 设置打包的模式
  mode: 'development',
  
  // 设置入口文件
  entry: './src/component/cpns.js',
  
  // 设置输出
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  // 配置模块规则
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader", 
          "css-loader", 
          "postcss-loader"
        ]
      },{
        test: /\.less$/,
        use:[ "style-loader","css-loader","less-loader"]
      },
      {
        test:/\.(png|jpe?g|svg|gif)$/,
        //打包两张图片，并且这两张图片有自己的地址，将地址设置到img/bgi中
        type:"asset/resource"
        //将图片进行base64的编码，并且直接编码后的源码放到打包的js文件中
        //type:"asset/inline"
      }
    ]
  }
};

上面那种方式的缺点就是多图片加载要两次网络请求

下面这种方式也有缺点，缺点是造成js的文件非常大，下载js文件本身消耗时间非常长，下载和解析的执行时间都很长

所以我们要进行合理的规范

对于小一点的图片，可以进行base64编码

对于大一点的图片，单独的图片打包，形成url地址，单独的请求这个url图片

自定义文件输出路径和文件名

方式一：修改output，添加assetModuleFinename属性

方式二：在Rule中，添加一个generator属性，并且设置filename

有几个常用的placeholder：

ext（处理文件的扩展名）、name（处理文件的名称）、hash（文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值，32个十六进制）

url-loader的limit效果

在开发中我们往往是小的图片需要转换，但是大的图片可以直接使用图片

小的图片转换base64之后可以和页面一起请求，减少不必要的请求过程

大的图片也进行转换，反而会影响页面的请求速度

我们要两个步骤来实现

一：将type修改为asset

二：添加一个parser属性，制定dataUrl的条件，添加maxsize属性

const path = require('path');

module.exports = {
  // 设置打包的模式
  mode: 'development',
  
  // 设置入口文件
  entry: './src/component/cpns.js',
  
  // 设置输出
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    // assetModuleFilename: 'abc.png'
  },

  // 配置模块规则
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader", 
          "css-loader", 
          "postcss-loader"
        ]
      },{
        test: /\.less$/,
        use:[ "style-loader","css-loader","less-loader"]
      },
      {
        test:/\.(png|jpe?g|svg|gif)$/,
        type: 'asset/resource',
        //打包两张图片，并且这两张图,
        //将图片进行base64的编码，并且直接编码后的源码放到打包的js文件中
        //type:"asset/inline"
        parser:{
          dataUrlCondition:{
            maxSize: 60 * 1024
          }
        },
        generator:{
          //不写死，使用占位符
          //name:指向原来的图片名称
          //ext：扩展名
          //hash:webpack生成的hash值
          filename:"img/[name]_[hash:8][ext]"
        }
      }
    ]
  }
};

这样进行打包，打包结束之后会在前面生成一个img文件夹

babel

开发中想要使用es6+的语法，想要使用typescript，开发React项目，都是离不开babel的

所以学习babel对于我们理解代码编写到线上的转变过程很重要

babel是一个工具链，主要用于旧浏览器或者环境中将ECMAScript2015+代码转换为向后兼容版本的JS，包括语法转换和源代码转换等

babel命令行的使用

babel本身可以作为一个独立的工具，不和webpack等构建工具配置来单独使用

如果我们希望在命令行尝试使用babel，需要安装下面的库：

@babel/core：babel的核心代码，必须安装

@babel/cli：可以让我们在命令行中使用babel

npm install @babel/cli @babel/core -D

使用babel来处理我们的源代码

src是源文件的目录

--out-dir指定要输出的文件夹dist

插件的使用

我们需要转换箭头函数，就可以使用箭头函数转换相关的插件

npm install @babel/plugin-transform-arrow-functions -D

npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions

查看转换后的结果我们会发现const没有转成var

plugin-transform-arrow-function并没有提供这样的功能

我们需要使用plugin-transform-block-scoping来完成这样的功能

npm install @babel/plugin-transform-block-scoping -D

npx babel src --out-dir --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions

当要转换的内容过多的时候，一个一个设置就比较麻烦了，可以用预设

安装@babel/preset-env预设

npm install @babel/preset-env -D

module.exports = {
plugins: [
    "babel/plugin-transform-arrow-functions",
    "babel/plugin-transform-block-scoping",
],
presets:[
    "@babel/preset-env"
]
}

在提供了preset之后，webpack就会根据我们的预设来加载对应的插件列表，并且将其川第一给babel

常见的预设有：

env

React

TypeScript

webpack继续学习