webpack基础篇

秒速五厘米 2023-09-28 08:42 118阅读 0赞

**目录**

前言：

1.核心概念介绍

2.处理Css资源

3.处理图片资源

4.修改输出资源的名称和路径

5.自动清空上次打包资源

6.处理字体图标资源

7.处理其他资源

8.处理js资源

9.处理HTML资源

10.开发服务器&自动化

--------------------

### 前言： ###

> **这篇文章目的是学习如何使用webpack，至于其他的不做过多废话。**
> 
> **`Webpack` 是一个静态资源打包工具。可以将一些文件（如es6语法、sass、less）编译成浏览器认识的代码，从而运行.**

--------------------

### 1.核心概念介绍 ###

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

在项目根目录下新建文件：`webpack.config.js`

//Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范
    //运行指令 npx webpack
    
    #修改配置文件
    // Node.js的核心模块，专门用来处理文件路径
    const path = require("path");
    
    module.exports = {
      // 入口
      // 相对路径和绝对路径都行
      entry: "./src/main.js",
      // 输出
      output: {
        // path: 文件输出目录，必须是绝对路径
        // path.resolve()方法返回一个绝对路径
        // __dirname 当前文件的文件夹绝对路径
        path: path.resolve(__dirname, "dist"),
        // filename: 输出文件名
        filename: "main.js",
      },
      // 加载器
      module: {
        rules: [],
      },
      // 插件
      plugins: [],
      // 模式
      mode: "development", // 开发模式
    };

--------------------

### 2.处理Css资源 ###

> Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源
> 
>  *  `css-loader`：负责将 Css 文件编译成 Webpack 能识别的模块
>  *  `style-loader`：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容
> 
> [Loaders | webpack 中文文档][Loaders _ webpack]

#### 2.1 配置css ####

步骤：先下载后配置

下载：

npm i css-loader style-loader -D

配置：

const path = require("path");
    
    module.exports = {
      entry: "./src/main.js",
      output: {
        path: path.resolve(__dirname, "dist"),
        filename: "main.js",
      },
      module: {
    ----------------------配置css  start---------------------------------------------
        rules: [
          {
            // 用来匹配 .css 结尾的文件
            test: /\.css$/,
            // use 数组里面 Loader 执行顺序是从右到左
            use: ["style-loader", "css-loader"],
          },
    ----------------------配置css  end--------------------------------------------
        ],
      },
      plugins: [],
      mode: "development",
    };

--------------------

#### 2.2 配置less ####

还是先下载后配置

下载：

npm i less-loader -D

配置：

const path = require("path");
    
    module.exports = {
      entry: "./src/main.js",
      output: {
        path: path.resolve(__dirname, "dist"),
        filename: "main.js",
      },
      module: {
        rules: [
          {
            // 用来匹配 .css 结尾的文件
            test: /\.css$/,
            // use 数组里面 Loader 执行顺序是从右到左
            use: ["style-loader", "css-loader"],
          },
    ------------------配置less start-----------------------------------------------
          {
            test: /\.less$/,
            use: ["style-loader", "css-loader", "less-loader"],
          },
    ------------------配置less end---------------------------------------------
        ],
      },
      plugins: [],
      mode: "development",
    };

小结：

> 以上实例，处理css资源无非先下载然后再配置，使用其他样式插件也是这样配置

--------------------

### 3.处理图片资源 ###

> 过去在 Webpack4 时，我们处理图片资源通过 `file-loader` 和 `url-loader` 进行处理
> 
> 现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源

此时如果查看 dist 目录的话，会发现多了三张图片资源
    
    因为 Webpack 会将所有打包好的资源输出到 dist 目录下
    
    为什么样式资源没有呢？
    因为经过 style-loader 的处理，样式资源打包到 入口文件（main.js） 里面去了，所以没有额外输出出来
    
    const path = require("path");
    
    module.exports = {
      entry: "./src/main.js",
      output: {
        path: path.resolve(__dirname, "dist"),
        filename: "main.js",
      },
      module: {
        rules: [
         
    --------------------处理图片资源 start---------------------
          {
            test: /\.(png|jpe?g|gif|webp)$/,
            type: "asset",
          },
    --------------------处理图片资源 end---------------------
        ],
      },
      plugins: [],
      mode: "development",
    };

--------------------

### 3.2 对图片资源进行优化 ###

> 将小于某个大小的图片转化成 data URI 形式（Base64 格式）
> 
> 注意：图片转base64优点是转为字符串不再发请求，缺点是体积会变大一点点

const path = require("path");
    module.exports = {
      entry: "./src/main.js",
      output: {
        path: path.resolve(__dirname, "dist"),
        filename: "main.js",
      },
      module: {
        rules: [
          {
            test: /\.(png|jpe?g|gif|webp)$/,
            type: "asset",
    ----------------------转base64 start----------------
            parser: {
              dataUrlCondition: {
                maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
              }
            }
    ----------------------转base64 end----------------
          },
        ],
      },
      plugins: [],
      mode: "development",
    };

--------------------

### 4.修改输出资源的名称和路径 ###

const path = require("path");
    
    module.exports = {
      entry: "./src/main.js",
      output: {
        path: path.resolve(__dirname, "dist"),
    -------------将 js 文件输出到 static/js 目录中 start--------------------
        filename: "static/js/main.js", 
    -------------将 js 文件输出到 static/js 目录中 end--------------------
      },
      module: {
        rules: [
          {
            // 用来匹配 .css 结尾的文件
            test: /\.css$/,
            // use 数组里面 Loader 执行顺序是从右到左
            use: ["style-loader", "css-loader"],
          },
          
          {
            test: /\.(png|jpe?g|gif|webp)$/,
            type: "asset",
            parser: {
              dataUrlCondition: {
                maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
              },
            },
    -------------将图片文件输出到 static/imgs 目录中 start--------------------
            generator: {
              // 将图片文件输出到 static/imgs 目录中
              // 将图片文件命名 [hash:8][ext][query]
              // [hash:8]: hash值取8位
              // [ext]: 使用之前的文件扩展名
              // [query]: 添加之前的query参数
              filename: "static/imgs/[hash:8][ext][query]",
            },
    -------------将图片文件输出到 static/imgs 目录中 end--------------------
          },
        ],
      },
      plugins: [],
      mode: "development",
    };

--------------------

### 5.自动清空上次打包资源 ###

clean: true, // 自动将上次打包目录资源清空

在配置文件中的位置如图所示：

![44dee3493bad49249ece42d142742873.png][]

--------------------

### 6.处理字体图标资源 ###

在配置文件中的位置是module中的rules中：

{
            test: /\.(ttf|woff2?)$/,
            type: "asset/resource",
            generator: {
              filename: "static/media/[hash:8][ext][query]",
            },
          },

--------------------

### 7.处理其他资源 ###

> 开发中可能还存在一些其他资源，如音视频等，我们也一起处理了
> 
> 注意哈:type: "asset",意思是转base64,这里是type: "asset/resource",意思就是原样输出(不做改变)

{
            test: /\.(ttf|woff2?|map4|map3|avi)$/,
            type: "asset/resource",
            generator: {
              filename: "static/media/[hash:8][ext][query]",
            //就是在处理字体图标资源基础上增加其他文件类型，统一处理即可
            },
          },

--------------------

### 8.处理js资源 ###

> 有人可能会问，js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？
> 
> 原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。
> 
> 其次开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。
> 
>  *  针对 js 兼容性处理，我们使用 Babel 来完成
>  *  针对代码格式，我们使用 Eslint 来完成
> 
> 我们先完成 Eslint，检测代码格式无误后，在由 Babel 做代码兼容性处理

#### 8.1 Eslint ####

使用步骤还是先下载后配置

下载：

npm i eslint-webpack-plugin eslint -D

配置：(注意要新建文件 ) .eslintrc.js

一般我们都是使用继承，vue或react都有使用。

module.exports = {
      // 继承 Eslint 规则
      extends: ["eslint:recommended"],
      env: {
        node: true, // 启用node中全局变量
        browser: true, // 启用浏览器中全局变量
      },
      parserOptions: {
        ecmaVersion: 6,
        sourceType: "module",
      },
      rules: {
        "no-var": 2, // 不能使用 var 定义变量
      },
    };

还要在webpack.config.js中配置：

const ESLintWebpackPlugin = require("eslint-webpack-plugin");
    
    module.exports = {
     
      module: {
        rules: [
         
        ],
      },
      plugins: [
        new ESLintWebpackPlugin({
          // 指定检查文件的根目录
          context: path.resolve(__dirname, "src"),
        }),
      ],
      mode: "development",
    };

--------------------

#### 8.2 Babel ####

> JavaScript 编译器。
> 
> 主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

使用步骤：

下载：

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

配置：新建babel.config.js

module.exports = {
      presets: ["@babel/preset-env"],
    };

配置webpack.config.js

{
            test: /\.js$/,
            exclude: /node_modules/, // 排除node_modules代码不编译
            loader: "babel-loader",
          },

--------------------

### 9.处理HTML资源 ###

> 优点就是自动帮你引入，减少路径错误，省事

还是先下载包：

npm i html-webpack-plugin -D

配置：

const HtmlWebpackPlugin = require("html-webpack-plugin");
    
    module.exports = {
     
      module: {
        rules: [
       
        ],
      },
      plugins: [
        
        new HtmlWebpackPlugin({
          // 以 public/index.html 为模板创建文件
          // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
          template: path.resolve(__dirname, "public/index.html"),
        }),
      ],
      mode: "development",
    };

--------------------

### 10.开发服务器&自动化 ###

> 这个相信大家都不陌生，平时npm run dev 、serve、start、build之类的命令都是它的功劳。
> 
> 每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化

还是下载和配置

下载：

npm i webpack-dev-server -D

配置：

//运行命令：npx webpack serve 
    // 开发服务器
      devServer: {
        host: "localhost", // 启动服务器域名
        port: "3000", // 启动服务器端口号
        open: true, // 是否自动打开浏览器
      },

--------------------

###  ###

[Loaders _ webpack]: https://webpack.docschina.org/loaders/
[44dee3493bad49249ece42d142742873.png]: https://img-blog.csdnimg.cn/44dee3493bad49249ece42d142742873.png