静态资源

图片优化

webpack5已经内置了图片转换的功能，而webpack4则需要依靠file-loader或url-loader来处理图片。

file-loader 主要是把文件发送到指定的输出目录
url-loader 主要是把小于指定文件大小的图片转换成base64

module.exports = {
  module: {
   rules: [
      {
        test: /.(png|jpg|gif)$/i,
        // webpack4
+       use: [
+         {
+           loader: 'url-loader',
+           options: {
+             limit: 8096,
+           }
+         },
+       ],
        // webpack5
+       type: 'asset'
+       parser: {
+         dataUrlCondition: {
+           maxSize: 4 * 1024  // 4kb
+         }
+       }
      },
   ]
  },
}

webpack5新增了资源模块asset-module的四种新类型，它允许使用资源文件（字体，图标等）而无需配置额外loader。

asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

同时，webpack依然支持使用loader来处理某些你希望的文件类型。只需要把type设置为javascript/auto即可，但一定要记得配置loader来处理。

那么书归正传，图片转换成base64的好处在哪里呢？

众所周知，浏览器获取静态资源的方式是通过发送请求来获取，如果图片不转换成base64，那么一张图片就会代表一个http请求。

那么问题就出现了，如果某些网站的图片很多，而且图片文件普遍偏小，那么服务器压力就会较大。但如果换成base64内联进文件，那么等于小图片都会随着一次请求到达浏览器中。

当然了，这种选择也有弊端，那就是转换后的文件大小比转换前的文件大小会大一点。

那么总结：只有在图片体积较小，且数量较多的情况下，使用base64的方案才会较为明显的性能优化效果。这种方案是典型的以文件大小换取服务器压力释放的方案。

修改静态资源的输出文件位置

module.exports = {
  // 第一种方法
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    // hash是webpack根据文件内容算出的值，具有唯一性
    // ext是文件名后缀
    assetModuleFilename: 'images/[hash][ext][query]'
  },
  // 第二种方法
  module: {
    generator: {
      asset: {
        // asseet 模块的 generator 选项
        // 自定义 asset 模块的 publicPath，自 webpack 5.28.0 起可用
        publicPath: 'assets/',
        // 将静态资源输出到相对于 'output.path' 的指定文件夹中，webpack 5.67.0 后可用
        outputPath: 'cdn-assets/',
      },
      'asset/inline': {
        // 同上
      },
      'asset/resource': {
        // 同上
      },
    },
    rules: [
      {
        test: /.png/,
        type: 'asset/resource',
        generator: {
          // 第三种 该方法只适用于 asset和asset/resource
          filename: 'static/[hash][ext][query]'
          // 此处也可以像第二种方法设置publicPath outputPath
        }
      }
    ]
  },
}

个人推荐使用第三种方案，个人强迫症。如果静态资源不多的话，可以直接使用第一种或第二种。

自动清空上次打包内容

webpack5 output.clean设为true后，自动清空output.path配置的文件目录 webpack 自带clean配置项 webpack4 插件clean-webpack-plugin

const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
  plugins: [
   new CleanWebpackPlugin(),
  ],
};

代码格式校验 Eslint

事先准备

项目中安装

eslint
webpack5安装eslint-webpack-plugin
webpack4安装eslint-loader

配置文件

.eslintrc.* 位于文件目录
- .eslintrc
- .eslintrc.js
- .eslintrc.json
- 以上三种皆可
package.json中eslintConfig字段进行配置
.eslintignore 忽略文件中目录的代码校验

配置

parserOptions
- ecmaVersion ES语法版本，值为数字或者年份
- sourceType 默认为script，现在一般都使用module
- ecmaFeatures
  - impliedStrict 启用严格模式
  - jsx 启用jsx
env 启用全局变量
- node Node.js全局变量和Node.js作用域。
- browser 浏览器环境中的全局变量。
- es6 启用除了modules以外的所有ECMAScript6特性（该选项会自动设置 ecmaVersion解析器选项为 6）。
extends 继承一些预设的规则集合
- Eslint官方 eslint:recommend
- vue cli脚手架 plugin:vue/essential
- create-react-app脚手架 react-app
rules 配置各种代码校验规则
- 官网规则
- 级别分为三种：关闭（0或off）、警告（1或warn）、错误（2或error）
- 某些规则还有一些额外的选项
- 当rules配置的规则与extends继承的规则冲突时，规则级别以rules配置为准；规则选项如果都配置了，则以rules为准；若rules未配置，则保留继承的规则选项。

{
  "parserOptions":{
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  }
  "env": {
    "browser": true
    "node": true
    "es6": true
  },
  // 等价于 "extends": ["eslint:recommended"]
  "extends": "eslint:recommended",
  "rules": {
    "eqeqeq": "off",
    "curly": "error",
    "quotes": ["error", "double"]
    "prefer-const": ["error", {"destructuring": "all"}]
  }
}

实际使用中，若有不可抗力导致校验出现警告或错误，可以用以下方法处理，行级注释与块注释皆可。

// 当前行忽略
alert('foo'); // eslint-disable-line

// 下一行忽略
// eslint-disable-next-line
alert('foo');

// 针对指定规则忽略
alert('foo'); // eslint-disable-line no-alert, quotes, semi

// eslint-disable-next-line no-alert, quotes, semi
alert('foo');

使用方式

webpack4

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: ["babel-loader", "eslint-loader"]
      }
    ]
    // 或用下面这个方法
    rules: [
      {
        enforce: "pre",
        test: /.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader"
      },
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  }
};

webpack5

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  // ...
  plugins: [new ESLintPlugin(options)],
  // ...
};

options
- EslintWebpackPlugin | webpack 中文文档 (docschina.org)
- context 指定文件根目录，类型为字符串。
- extensions 指定需要检查的扩展名，默认js。可传字符串和数组
- exclude 默认值node_modules,指定需要排除的文件及目录。必须是相对于 options.context 的相对路径。
- files 指定的文件及目录。必须是相对于 options.context 的相对路径。

【webpack】学习笔记之二（图片优化及Eslint使用）