webpack5基础（上篇）

一、基本配置

在开始使用 webpack 之前，我们需要对 webpack 的配置有一定的认识

1、5大核心概念

1）entry （入口）

指示 webpack 从哪个文件开始打包

2）output（输出）

制视 webpack 打包完的文件输出到那里去，如何命名等

3）loader（加载器）

webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader webpack 才能解析

4）plugins（插件）

扩展 webpack 的功能

5）mode（模式）

主要有两种模式：

开发模式：development

生产环境：production

2、配置文件

项目中添加文件，命名为 webpack.config.js

javascript 复制代码

const path = require("path")

module.exports = {
  // 入口
  entry: "./main.js",// 相对路径
  // 输出
  output: {
    // __dirname 是 nodejs 的遍历，代表当前文件的文件夹目录
    path: path.resolve(__dirname, "dist"),// 绝对路径
    filename: "main.js"
  },
  // 加载器
  module: {
    rules: [
      // loader 的配置
    ]
  },
  // 插件
  plugins: [

  ],
  // 模式
  mode: "development", // 开发模式
}

二、开发模式介绍

开发模式顾名思义就是我们开发代码时使用的模式。

这个模式下我们主要做两件事情：

1、编译代码，使浏览器能够识别运行

开发时我们有样式资源、字体图标、图片压缩、html资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源

2、代码质量检查，树立代码规范

提前检查代码的一些隐患，让代码运行时能更加健壮

提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观

三、处理样式资源

css，less，sass，scss styl 等样式资源

SCSS/SASS 相对于 CSS 的优势：

变量支持

scss 复制代码

// 定义变量
$primary-color: #3498db;
$font-size: 16px;

// 使用变量
body {
  font-size: $font-size;
  color: $primary-color;
}

更好的样式嵌套

scss 复制代码

.nav {
  ul {
    list-style: none;
  }
  li {
    display: inline-block;
     a {
      color: $primary-color;
    }
  }
}

可复用的混合宏（Mixins）

scss 复制代码

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.box { 
  @include border-radius(10px); 
}

样式继承

scss 复制代码

.btn {
  padding: 10px;
  background-color: $primary-color;
}
.btn-primary {
  @extend .btn;
}

条件语句和循环

scss 复制代码

$theme: light;
body {
  @if $theme == light {
    background-color: white;
  } @else {
    background-color: black;
  }
}
// 循环生成多个类
@for $i from 1 to 5 {
  .item-#{$i} {
    width: 100px * $i;
  }
}

样式模块化（Partials）

scss 复制代码

// _variables.scss
$primary-color: #3498db;

//index.scss
@import 'variables';

数学运算

scss 复制代码

.container {
  width: 100% - 20px;
  margin: 10px * 2;
}

更强的性能优化能力：

SCSS/SASS 在编译时会压缩和优化代码，移除多余的空格、注释等，从而减少最终生成的 CSS 文件的大小，提高页面加载性能。

CSS 需要手动进行优化，或者依赖外部工具进行压缩。

支持模块系统（@use 和 @forward）

scss 复制代码

// _colors.scss
$primary-color: #3498db;
// main.scss
@use 'colors';
body {
  color: colors.$primary-color;
}

1、介绍

webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 webpack 解析样式资源

我们找 Loader 都应该去官方文档中查找使用

官方文档：https://webpack.docschina.org/concepts/#loaders

2、处理 css 资源

1）下载包

npm i css-loader style-loader -D

注意：需要下载两个 loader

2）功能介绍

css-loader：负责将 css 文件编译成 webpack 能识别的模块

style-loader：会动态创建一个 style 标签，里面放置webpack 中 css 模块内容

此时样式就会以 style 标签的形式在页面上生效

3）配置

javascript 复制代码

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

javascript 复制代码

const path = require("path")

module.exports = {
  // 入口
  entry: "./main.js",// 相对路径
  // 输出
  output: {
    // __dirname 是 nodejs 的遍历，代表当前文件的文件夹目录
    path: path.resolve(__dirname, "dist"),// 绝对路径
    filename: "main.js"
  },
  // 加载器
  module: {
    rules: [
      // loader 的配置
      {
        test: /\.css$/i,// 正则检测哪些文件
        // use 的执行顺序 从右往左（从下到上）， 
        use: [
          'style-loader', // 通过创建style 标签添加到html 文件中生效
          'css-loader' // 将css 资源编译成 commonjs的模块到 js 中
        ],
      },
    ]
  },
  // 插件
  plugins: [

  ],
  // 模式
  mode: "development", // 开发模式
}

3、处理 less 资源

1）安装

npm install less less-loader --save-dev

将 less 文件编译成 css 文件

2）配置(webpack.config.js)：

javascript 复制代码

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
};

4、处理 scss/sass 资源

1）安装

npm install sass-loader sass webpack --save-dev

2）配置

javascript 复制代码

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,//匹配 sass/scss 两种文件
        use: [
          // 将 JS 字符串生成为 style 节点
          'style-loader',
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
    ],
  },
};

5、处理 Styl 资源

1）安装

npm i stylus-loader -D

2）配置

javascript 复制代码

module.exports = {
  module: {
    rules: [
      {
        test: /\.styl$/i,//匹配 sass/scss 两种文件
        use: [
          // 将 JS 字符串生成为 style 节点
          'style-loader',
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'stylus-loader',
        ],
      },
    ],
  },
};

四、处理图片资源

过去在 webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理

现在 webpack5 已经将两个 Loader 功能内置到 webpack 里了，我们只需要简单配置即可处理图片资源

1、配置

javascript 复制代码

const path = require("path")
module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'main.js'
  },
  module: {
    rules: [
     {
        test: /\.(png|jpg|webp|svg|jpeg|gif)/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            // 小于 10kb 的图片转换成 base64.
            maxSize: 10 * 1024 
          }
        }
      }
    ]
  }
}

图片转成 base64 的优势是减少请求数量，缺点是体积会变大。

一般小图片会考虑转成 base64，大图还是请求（如果也转换 base64 的话就导致页面加载缓慢）

有转换的时候，图片在打包后的文件夹里会少一些

2、修改不同资源的输出目录，比如图片到 image， css 到 css 文件夹

javascript 复制代码

const path = require("path")
module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'static/js/main.js'// 入口的文件打包以后输出到 js 中
  },
  module: {
    rules: [
     {
        test: /\.(png|jpg|webp|svg|jpeg|gif)/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            // 小于 10kb 的图片转换成 base64.
            maxSize: 10 * 1024 
          }
        },
        generator: {
          //hash 值， ext 扩展名 query 一些其他的参数 ； hash:10表示hash值取前10位，不写就是全部
         filename: 'static/image/[hash:10][ext][query]'
       }
      }
    ]
  }
}

3、自动清空上次打包的内容

webpack4 需要 clearwebpackplugin 的插件来处理，webpack5 加一个 clean 参数即可

javascript 复制代码

const path = require("path")
module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'static/js/main.js',// 入口的文件打包以后输出到 js 中
    clean: true // 原理：到抱歉将path 整个目录内容清空
  },
  module: {
    rules: [
     {
        test: /\.(png|jpg|webp|svg|jpeg|gif)/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            // 小于 10kb 的图片转换成 base64.
            maxSize: 10 * 1024 
          }
        },
        generator: {
          //hash 值， ext 扩展名 query 一些其他的参数 ； hash:10表示hash值取前10位，不写就是全部
         filename: 'static/image/[hash:10][ext][query]'
       }
      }
    ]
  }
}

五、处理字体图标资源

1、下载字体图标并引入到 main.js 中

iconfont，可以在阿里巴巴的矢量图中下载。

javascript 复制代码

const path = require("path");
module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'static/js/main.js',// 入口的文件打包以后输出到 js 中
    clean: true // 原理：到抱歉将path 整个目录内容清空
  },
  module: {
    rules: [
     {
        test: /\.(png|jpg|webp|svg|jpeg|gif)/,
        type: 'asset', // 会转成base64
        parser: {
          dataUrlCondition: {
            // 小于 10kb 的图片转换成 base64.
            maxSize: 10 * 1024 
          }
        },
        generator: {
          //hash 值， ext 扩展名 query 一些其他的参数 ； hash:10表示hash值取前10位，不写就是全部
         filename: 'static/image/[hash:10][ext][query]'
       }
      },
       {
        test: /\.(ttf|woff2?)/,
        type: 'asset/resource', // 原样输出，不再转换
        parser: {
          dataUrlCondition: {
            // 小于 10kb 的图片转换成 base64.
            maxSize: 10 * 1024 
          }
        },
        generator: {
          //hash 值， ext 扩展名 query 一些其他的参数 ； hash:10表示hash值取前10位，不写就是全部
         filename: 'static/fonts/[hash:10][ext][query]'
       }
      }
    ]
  }
}

六、处理 js 资源

为什么还需要处理 js资源？

原因是 webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以还需要做一些兼容性处理

1、Eslint

可组装的 JavaScript 和 JSX 检查工具。

这句话意思就是：它用来检测 js 和 jsx 的工具，可以配置各项功能

1.1 配置文件

配置文件有很多写法

eslintrc.* 新建文件，位于项目根目录
.eslintrc
.eslintrc.js
.eslintrc.json
区别在于配置格式不一样

ESlint会查找和自动读取他们，所以以上配置文件只需要存在一个即可

1.2 具体配置

以 .eslintrc.js 配置文件为例

javascript 复制代码

module.exports = {
  // 解析选项
  parserOptions: {
     ecamVersion: 6,// ES 语法版本
      sourceType: 'module',// ES 模块化
      ecmaFeatures: {
        // ES 其他特性
        jsx: true, // 如果是 React 项目，就需要开启 jsx 语法
      }
  },
  // 具体检查规则
  rules: {
  //  "off" 或 0：关闭规则
  // "warn" 或 1：开启规则，使用警告级别的错误，warn 不会导致程序退出
  // "error"或2：开启规则，使用错误级别的错误：error 当被触发的时候，程序会退出
    semi: "error", // 禁止使用分号
    'array-callback-return': 'warn',// 强制数组方法的回调函数中有 return 语句，否则警告
    'default-case': [
      'warn',
      {commonentPattern: '^no default$'} // 允许在最后注释 no default ，就不会有警告了
    ],
    eqeqeq: [
      'warn', // 强制使用 === 和 !== ，否则警告
      'smart'
    ]
  },
  // 继承其他规则，直接使用 网站上别人写好的规则或者是官方写好的规则
  extends: []
}