# webpack5

**Repository Path**: longfei_wang/webpack5

## Basic Information

- **Project Name**: webpack5
- **Description**: webpack5学习笔记
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-03-08
- **Last Updated**: 2024-03-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基本使用

webpack 是一个静态资源打包工具
它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器段运行了我们将 Webpack 输出的文件叫做 bundle 。

# 功能介绍

Webpack 本身功能是有限的:

- 开发模式:仅能编译 JS 中的 ES Module 语法
- 生产模式: 能编译 JS 中的 ES Module 语法，还能压缩 JS 代码

# 目标

webpack 本身功能比较少，只能处理 js 资源，一旦遇到 css 等其他资源就会报错 。
学习 webpack 主要是学习如何处理其他资源

# webpack 核心概念

1. 入口(entry)
   指示 Webpack 从哪个文件开始打包
2. 输出(output)
   指示 Webpack 打包完的文件输出到哪里去，如何命名等
3. loader
   webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析
4. 插件(plugins)
   扩展 Webpack 的功能
5. 模式(mode)
   - 开发模式:development
   - 生产模式:production

# 安装

```
npm init -y
npm i webpack webpack-cli -D
```

# 配置

在文件根目录新建 webpack.config.js

```
const path = require('path'); // nodejs核心模块,专门处理路径问题
// 配置
module.exports = {
    // 入口
    entry: './src/main.js', // 相对路径
    // 输出
    output: {
        // 文件的输出路径
        // __dirname node.js的变量,代表当前文件的文件夹目录
        path: path.resolve(__dirname, 'dist'), // 绝对路径
        // 文件名称
        filename: 'main.js'
    },
    // 加载器
    module: {
        rules: [
            // loader的配置
        ]
    },
    // 插件
    plugins: [
        // plugin的配置
    ],
    // 模式
    mode: 'development'
}
```

## 开发模式介绍

开发模式顾名思义就是我们开发代码时使用的模式。
这个模式下我们主要做两件事:

- 1. 编译代码，使浏览器能识别运行
     开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源。
- 2. 代码质量检查，树立代码规范
     提前检查代码的一些隐患，让代码运行时能更加健壮。
     提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。

## 处理样式资源

### 处理 css

- 下载 style-loader 和 css-loader

```
npm i style-loader css-loader -D
```

- 配置

```
module: {
    rules: [
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
      }
    ]
}
```

### 处理 Less

- 下载 less-loader 和 less

```
npm i less-loader less -D
```

- 配置

```
module: {
    rules: [
        {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
}
```

### 处理 Sass

- 下载 sass-loader 和 sass

```
npm i sass-loader sass -D
```

- 配置

```
module: {
    rules: [
        {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
}
```

### 处理 stylus

- 下载 stylus-loader

```
npm i stylus-loader -D
```

- 配置

```
module: {
    rules: [
        {
            test: /\.styl$/,
            use: ['style-loader', 'css-loader', 'stylus-loader']
      }
    ]
}
```

## 处理图片资源

- webpack4 时，处理图片资源需要通过 file-loader 和 url-loader 进行处理
- 下载 url-loader 和 file-loader

```
npm i url-loader file-loader -D
```

- 配置

```
module: {
    rules: [
        {
            test: /\.(jpg|png|gif|bmp|jpeg|webp)$/,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 8 * 1024,
                        name: '[hash:10].[ext]',
                        outputPath: 'imgs'
                    }
                }
            ]
      }
    ]
}
```

- webpack5 时，这两个 loader 已经内置到 webpack 中,只需要配置 type: 'asset'

- 配置

```
module: {
    rules: [
        {
            test: /\.(jpg|png|gif|bmp|jpeg|webp)$/,
            type: 'asset',
            parser: {
                dataUrlCondition: {
                    maxSize: 10 * 1024 // 小于10kb会转base64,(优点:会减少请求数量,缺点:体积会更大)
                }
            }
        }
    ]
}
```

## 修改打包输出文件目录

- 1. JS 文件的去找 output 配置，并修改其中的 filename

  ```
   filename: 'static/js/main.js',
  ```

- 2. 图片的去找图片的 loader，并添加 generator 配置

  ```
    generator: {
        filename: 'static/images/[hash:10][ext][query]'
    }

  ```

## 自动清空上次打包结果

- 在 output 配置中添加`clean: true`

## 处理字体图标资源

- 在 loader 中配置(和对图片的处理配置一样)

```
  {
    test: /\.(ttf|woff2?|eot|otf)$/,
    type: 'asset/resource',
    generator: {
        // 生成输出字体图标名称
        filename: 'static/fonts/[hash:10][ext][query]'
    }
}
```

## 处理其他资源(音视频等)

- 在 type 为`'asset/resource'`配置的 test 匹配规则后面继续增加

```
  test: /\.(ttf|woff2?|eot|otf|mp3|mp4)$/,
```

## 处理 JS 资源

- 针对 js 兼容性处理，我们使用 Babel 来完成
- 针对代码格式，我们使用 Eslint 来完成

### Eslint

- 检测代码中潜在的问题和错误的工具，可以配置各项功能
- 在 webpack4 中是一个 loader,在 webpack5 中是一个 plugin

- 安装 Eslint

```
npm i eslint-webpack-plugin eslint -D
```

- 在 webpack.config.js 中配置 Eslint 插件

```
const ESLintWebpackPlugin = require('eslint-webpack-plugin')

module.exports = {
    plugins: [
         new ESLintPlugin({
            context: path.resolve(__dirname, 'src') // 指定检查的目录
        })
    ]
}
```

- 在根目录创建`.eslintrc.js`文件

```
module.exports = {
    extends: ["eslint:recommended"],
    env: {
        node: true, // 启用node中全局变量
        browser: true // 启用浏览器中全局变量
    },
    parserOptions: {
        ecmaVersion: 6, // es6
        sourceType: "module" // es module
    },
    rules: {
        "no-var": 2, // 不能使用var定义变量
    }
    // ...更多规则看官网

}
```

### Babel

- 用于将 ES6 代码转换成向后兼容的 JS 语法

- 安装 Babel

```
npm i @babel/core @babel/preset-env babel-loader -D
```

- 在 webpack.config.js 中配置 Babel

```
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/, // 不处理node_modules中的js文件
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    }
}
```

- 在根目录创建`babel.config.js`文件

```
module.exports = {
    // 智能预设,能够编译es6的语法
    presets: ["@babel/preset-env",]
}
```

## 处理 Html 资源

- 安装 html-webpack-plugin

```
npm i html-webpack-plugin -D
```

- 在 webpack.config.js 中配置 html-webpack-plugin

```
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
             template: path.resolve(__dirname,'public/index.html') // 指定模板文件路径
            }
        )
    ]
}
```

## 开发服务器&自动化

- 安装 webpack-dev-server

```
npm i webpack-dev-server -D
```

- 在 webpack.config.js 中配置开发服务器

```
module.exports = {
    devServer: {
        host: 'localhost', // 设置启动时候的主机地址
        port: 3000, // 设置启动时候的运行端口
        open: true // 自动打开浏览器访问
    }
}
```

- 启动服务器

```
npx webpack serve
```

## 生产模式介绍

生产模式是开发完成代码后，我们需要得到代码将来部署上线，这个模式下我们主要对代码进行优化，让其运行性能更好。
优化主要从两个角度出发:

- 1. 优化代码运行性能
- 2. 优化代码打包速度

### 生产模式准备

- 1. 根目录创建 config 文件夹
- 2. 在下面创建`webpack.dev.js`和`webpack.prod.js`，分别用于开发模式和生产模式下的配置文件，
- 2.1 开发环境不需要输出,所以设置 path: undefined
- 2.2 开发模式下,不需要输出,所以注释 clean: true
- 2.3 生产模式下,需要输出,所有用到绝对路径的都要用`../`返回上一层
- 2.4 生产模式不需要 devServer
- 2.5 开发模式和生产模式中 mode 要统一

### 生产模式配置

#### CSS 处理 (提取 CSS 成单独文件)

- CSS 文件目前被打包到 JS 中,当 JS 加载时创建 style 标签来生成样式,这会导致页面闪屏,影响用户体验,应该将 CSS 直接提取成单独的样式文件,通过 link 标签引入

- 安装 mini-css-extract-plugin

```
npm i mini-css-extract-plugin -D
```

- 在 webpack.prod.js 中配置
- 之前所有写 style-loader 的地方,现在都需要改成 MiniCssExtractPlugin.loader,因为 style-loader 会动态创建 style 标签

```
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader, // 提取成单独文件
                    'css-loader',
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin()
    ],
}
```

#### CSS 兼容性处理

- 安装 postcss-loader postcss postcss-preset-env

```
npm i postcss-loader postcss postcss-preset-env -D
```

- 在 webpack.prod.js 中配置
- 该配置需要写在 css-loader 的后面和 less-loader、sass-loader 的前面

```
{
    loader: 'postcss-loader', // 配置postcss
    options: {
        postcssOptions: {
            plugins: [
                postcss-preset-env' // 能解决大多数样式兼容性问题
            ]
        }
    }
},
```

- 在 package.json 中配置
- 指定兼容性处理到哪个浏览器版本
- 实际开发中可以设置为 "last 2 version" , "> 1%" , "not dead"

```
  "browserslist": [
    "ie >= 8"
  ]
```

#### 封装样式 loader 函数

- 由于上面配置的 CSS 兼容性样式处理代码冗余,将他封装成一个 loader 函数

```
function getStyleLoader(pre) {
    return [ // 执行顺序,从右到左,从下到上
        MiniCssExtractPlugin.loader, // 将css提取成单独文件
        'css-loader', // 将css编译成commonjs的模块到js中
        {
            loader: 'postcss-loader', // 配置postcss
            options: {
                postcssOptions: {
                    plugins: [
                        'postcss-preset-env' // 能解决大多数样式兼容性问题
                    ]
                }
            }
        },
        pre
    ].filter(Boolean)
}
```

- 使用

```
getStyleLoader()
getStyleLoader('less-loader')
getStyleLoader('sass-loader')
getStyleLoader('stylus-loader')
```