webpack学习笔记

已于 2022-08-31 13:51:10 修改
阅读量413 收藏
点赞数
分类专栏： # Webpack 文章标签： webpack 学习 前端
于 2022-06-26 07:28:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/kianagrow/article/details/125435293
版权
本文详细介绍了前端工程化概念，包括模块化、组件化、规范化和自动化，并探讨了Webpack作为主流的前端工程化解决方案。Webpack的配置、插件、loader的使用以及优化策略，如CSS处理、图片和字体资源的打包、JS资源管理和SourceMap的配置等，都被逐一阐述。此外，文章还讨论了开发服务器自动化、提升打包速度和减少代码体积的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

思维导图

在这里插入图片描述

文章目录

1. 前端工程化概念

1.1 现代化前端开发

小白眼中的前端开发：

  • 会写 HTML + CSS + JavaScript 就会前端开发
  • 需要美化页面样式，就拽一个 bootstrap 过来
  • 需要操作 DOM 或发起 Ajax 请求，再拽一个 jQuery 过来
  • 需要快速实现网页布局效果，就拽一个 Layui 过来

实际的前端开发：

  • 模块化（js 的模块化、css 的模块化、资源的模块化）
  • 组件化（复用现有的 UI 结构、样式、行为）
  • 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理）
  • 自动化（自动化构建、自动部署、自动化测试）

1.2 前端工程化概念

  • 前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
  • 企业中的 Vue 项目和 React 项目，都是基于工程化的方式进行开发的。
  • 好处：前端开发自成体系，有一套标准的开发方案和流程。最大程度地提高了前端的开发效率，降低了技术选型、前后端联调等带来的协调沟通成本

1.3 前端工程化的解决方案

早期的前端工程化解决方案：

目前主流的前端工程化解决方案：

2. webpack 的基本使用

2.1 webpack概述

  • 概念：webpack 是前端项目工程化的具体解决方案(静态资源打包工具)。
  • 运作：它会以一个或多个文件作为打包的入口，将整个项目所有文件编译组合成一个或多个文件输出出去。
  • 主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。
  • 好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。
  • 注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的。

2.2 webpack的安装

在终端运行如下的命令，安装 webpack 相关的两个包：

npm  install  webpack webpack-cli -D

在这里插入图片描述

2.3 webpack的配置

5 大核心配置

  • entry（入口）：指示 Webpack 从哪个文件开始打包

  • output（输出）：指示 Webpack 打包完的文件输出到哪里去，如何命名等

  • loader（加载器）：webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析

  • plugins（插件）：扩展 Webpack 的功能

  • mode（模式）：开发模式(development) 或 生产模式(production)

module.exports = {
  // 入口
  entry: "",
  // 输出
  output: {},
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "",
};

2.3.1 基本配置

1、在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：

module.exports = {
    mode: 'development', // mode 用来指定构建模式，可选值有 development 和 production
}

2、在 package.json 的 scripts 节点下，新增 dev 脚本如下：

"scripts": {
    "dev": "webpack"  // script 节点下的脚本, 可以通过 npm run 执行。
    //例如 npm run dev .  dev可以换成别的名字，webpack不可以改名
}

在这里插入图片描述

3、在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

npm run dev

在这里插入图片描述

或者直接在终端，指定打包入口和打包模式

# 开发模式
npx webpack ./src/main.js --mode=development
# 生产模式
npx webpack ./src/main.js --mode=production

  • npx webpack: 是用来运行本地安装 Webpack 包的。

  • ./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。

2.3.2 mode 的可选值

mode环境对打包生成的文件进行代码压缩和性能优化打包速度
development开发环境不会打包速度快，适合在开发阶段使用
production生产环境会打包速度很慢，仅适合在项目发布阶段使用

2.3.3 webpack.config.js

  • webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。
  • 注意：由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置。

2.3.4 webpack 中的默认约定

  • 在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：
    ① 默认的打包入口文件为 src -> index.js
    ② 默认的输出文件路径为 dist -> main.js
  • 注意：可以在 webpack.config.js 中修改打包的默认约定

2.3.5 自定义打包的入口与出口

在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口(输出的文件一般叫bundle)。

示例代码如下：

const path = require("path");
// 使用node.js 中的导出语法，向外导出一个webpack的配置对象
module.exports = {
  mode: "development", // 代表webpack的运行模式，可选值为两个 development 和production
  // 开发阶段用devlopment,因为开发追求打包速度，而不是体积
  // 发布上线用 production，因为上线追求体积小，而不是打包速度

  // entry入口 : '指定要打包的文件入口'
  entry: path.join(__dirname, "./src/index2.js"),
  // 指定生成的文件要存放到哪里
  output: {
    // 存放的目录，必须是绝对路径
    path: path.join(__dirname, "./dist"),
    // 生成的文件名
    filename: "bundle.js",
  },
};

3. webpack 中的插件

3.1 webpack 插件的作用

通过安装和配置第三方的插件(plugins)，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。最常用的webpack 插件有如下两个：

  • ① webpack-dev-server
    类似于 node.js 阶段用到的 nodemon 工具
    每当修改了源代码，webpack 会自动进行项目的打包和构建
  • ② html-webpack-plugin
    webpack 中的 HTML 插件（类似于一个模板引擎插件）
    可以通过此插件自定制 index.html 页面的内容

3.2 开发服务器&自动化

webpack-dev-server 可以让 webpack 监听项目源代码的变化，从而进行自动打包构建(不需要每次手动去打包)。

3.2.1 安装 webpack-dev-server

运行如下的命令，即可在项目中安装此插件：

npm install  webpack-dev-server -D

3.2.2 配置 webpack-dev-server

① 修改 package.json -> scripts 中的 dev 命令如下：

"scripts": {
    "dev": "webpack serve"  // script 节点下的脚本, 可以通过 npm run 执行。
}

② 再次运行 npm run dev 命令，重新进行项目的打包
③ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

  • 注意：webpack-dev-server 会启动一个实时打包的 http 服务器
  • 问题：如果访问http://localhost:8080，出现如下 Cannot GET / 情况

在这里插入图片描述
尝试在webpack.config.js下做如下修改之后，重新 npm run 一下

module.exports = {
	mode: 'development', 
    //加入下面这段告知 webpack-dev-server，将 './' 目录下的文件 serve 到localhost:8080 下(寄存到服务器下)
	devServer: {
	  static: "./",
	  // host: "localhost", // 自定义启动服务器域名
      // port: "3000", // 可以自定义启动服务器端口号
      // open: true, // 自定义是否自动打开浏览器
	}
}

可以访问到资源了

在这里插入图片描述

3.3.3 打包生成的文件路径

① 不配置 webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上

  • 严格遵守开发者在 webpack.config.js 中指定配置
  • 根据 output 节点指定路径进行存放

② 配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中

  • 不再根据 output 节点指定的路径，存放到实际的物理磁盘上
  • 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多

3.3.4 访问生成到内存中的文件

webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。

  • 可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件
  • 例如 /bundle.js 就表示要访问 webpack-dev-server 生成到内存中的 bundle.js 文件

在这里插入图片描述

3.3 处理HTML资源

  • html-webpack-plugin 是 webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容。
  • 需求：通过 html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中一份！

3.3.1 安装 html-webpack-plugin

运行如下的命令，即可在项目中安装此插件：

npm  install html-webpack-plugin -D

3.3.2 配置 html-webpack-plugin

在 webpack.config.js中添加配置如下

// 1.导入html-webpack-plugin 插件，得到插件的构造函数
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development", 
  // 2. 插件的数组，将来webpack在运行时，会加载并调用这些插件
  // 3. new 构造函数，创建插件的实例对象
  plugins: [
  new HtmlPlugin({
    // 指定以 src/index.html 为模板创建文件
    template: "./src/index.html",
    // 指定存放路径，和文件名
    filename: "./index.html",
    //新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
  })
],

3.3.3 解惑 html-webpack-plugin

① 通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到了内存中
② HTML 插件在生成的 index.html 页面，自动注入了打包的 bundle.js 文件

3.3.4 devServer 节点

在 webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置，示例代码如下：

module.exports = {
  devServer: {
    open: true, // 初次打包完成后，自动打开浏览器
    host: "127.0.0.1", //实时打包所使用的主机地址
    port: 80, // 实时打包所使用的端口号
  }
};

注意：凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效！

4. webpack中的loader

4.1 loader 概述

  • 在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！
  • loader 加载器的作用：协助 webpack 打包处理特定的文件模块。比如：
    • css-loader 可以打包处理 .css 相关的文件
    • less-loader 可以打包处理 .less 相关的文件
    • babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法
    • 其他loader，可在官网查询https://webpack.docschina.org/loaders/

4.2 loader 的调用过程

在这里插入图片描述

4.3 处理样式资源

4.3.1 打包处理 CSS 文件

前提：首先得把你css文件引入webpack的打包入口，如：

// 导入样式（在webpack中，一切皆模块，都可以通过ES6导入语法导入和使用）
import "./index.css";

1、安装处理 css 文件的 loader：它负责将 css 文件编译成 Webpack 能识别的模块

npm i style-loader css-loader -D
  • css-loader：负责将 css 文件编译成 Webpack 能识别的模块
  • style-loader：会动态创建一个 Style 标签，里面放置 Webpack中 css 模块内容

2、在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module.exports = {
  module: { //所有第三方模块的匹配规则
    rules: [{ //文件后缀名的匹配规则
     test: /\.css$/, 
     use: ["style-loader", "css-loader"] 
    }],
  },
};
  • 其中，test 表示匹配的文件类型， use 表示对应要调用的 loader
  • 注意：
    • use 数组中指定的 loader 顺序是固定的
    • 多个 loader 的调用顺序是：从后往前调用

在这里插入图片描述
经过 style-loader 的处理，样式资源打包到 main.js 里面去了，没有额外输出出来，所有看不到打包后的css文件

4.3.2 打包处理 less 文件

前提：首先得把你less文件引入webpack的打包入口，如：

import "./index.less";

1、下载包

npm i less-loader less -D

2、在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module: {
    rules: [{
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"], 
        //这里less包是less-loader的内置依赖项，
        //只需要装到项目里就可以了，不需要显示申明到这个数组里去
      },
    ],
}
  • less-loader：负责将 Less 文件编译成 css 文件
  • less：less-loader 依赖 less 进行编译

4.3.3 打包处理Sass 文件

1、下载包

npm i sass-loader sass -D
  • sass-loader：负责将 Sass 文件编译成 css 文件
  • sass：sass-loader 依赖 sass 进行编译

2、配置

module: {
  rules: [
    {
      test: /\.s[ac]ss$/,
      use: ["style-loader", "css-loader", "sass-loader"],
    },
  ],
}

4.3.4 打包处理 Styl 文件

1、下载包

npm i stylus stylus-loader -D
  • stylus-loader：负责将 Styl 文件编译成 css 文件
  • stylus：stylus-loader 依赖 stylus 进行编译

2、配置

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

4.3.5 提取 CSS 成单独文件

  • CSS 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式，这样对于网站来说，会出现闪屏现象，用户体验不好
  • 应该是单独的 CSS 文件，通过 link 标签加载，性能才好

1、下载包

npm i mini-css-extract-plugin -D

2、配置（这里不再使用style-loader，用到的地方要换成mini-css-extract-plugin插件）

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        // 把之前 use的"style-loader"都改成MiniCssExtractPlugin.loader
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
    ],
  },
  plugins: [
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
  ],
};

4.3.6 CSS 兼容性处理

1、下载包

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

2、配置 webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
        ],
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "less-loader",
        ]
      }
    ]
  }
};

3、控制兼容性

在 package.json 文件中添加 browserslist 配置项来控制样式的兼容性做到什么程度

{
  // ...
  "browserslist": ["last 2 version", "> 1%", "not dead"] // 每个浏览器的最后2个版本
}

想要知道更多的 browserslist 配置，查看browserslist 文档

4、合并配置(封装一个获取各种cssloader的函数)

// 定义一个获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};
module.exports = {
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: getStyleLoaders(), 
      },
      {
        test: /\.less$/,
        use: getStyleLoaders("less-loader"),// 在这直接调用即可,并传入参数
      },
      {
        test: /\.s[ac]ss$/,
        use: getStyleLoaders("sass-loader"),
      }
    ],
  },
  plugins: [
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
  ],
};

注：在生产模式下，js和html是默认压缩的，不需要额外的配置

4.3.7 CSS 压缩

1、下载包

npm i css-minimizer-webpack-plugin -D

2、引入并配置

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
  module: {
    rules: [],
  },
  plugins: [
    // css压缩
    new CssMinimizerPlugin(),
  ],
  mode: "production",
};

4.4 处理图片资源

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

1、在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module: {
  rules: [
    { 
    test: /\.(png|jpe?g|gif|webp)$/, 
    type: "asset",
    },
  ],
}

2、对图片资源进行优化：将小于某个大小的图片转化成 data URI 形式（Base64 格式）

module: {
  rules: [
    { 
    test: /\.(png|jpe?g|gif|webp)$/, 
    type: "asset",
    parser: {
      dataUrlCondition: {
        maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
      }
    }
    },
  ],
}
  • 优点：减少请求数量
  • 缺点：体积变得更大
  • 转成base64的图片以 data URI 形式内置到 js 中了

3、修改输出资源的名称和路径：把图片输出路径和js输出路径区分出来，便于维护

output: {
  path: path.resolve(__dirname, "dist"),
  filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
},
module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif|webp)$/,
      type: "asset",
      parser: {
        dataUrlCondition: {
          maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
        },
      },
      generator: {
        // 将图片文件输出到 static/imgs 目录中
        // 将图片文件命名 [hash:8][ext][query]
        // [hash:8]: hash值取8位
        // [ext]: 使用之前的文件扩展名
        // [query]: 添加之前的query参数
        filename: "static/imgs/[hash:8][ext][query]",
      },
    },
  ],
}

4.5 处理字体图标资源

在打包入口文件，还是得引入字体图标的css文件(记得字体文件和字体css文件路径问题)。然后配置打包规则

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

type: "asset/resource" 和 type: "asset"的区别：

  • type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理
  • type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式

4.6 处理其他资源

开发中可能还存在一些其他资源，如音视频等

module: {
  rules: [
      {
        test: /\.(mp4|mp3|avi)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
  ],
}

4.6 处理 js 资源

4.6.1 为何要处理js资源

1、webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借助于 babel-loader 进行打包处理。例如 webpack 无法处理下面的 JavaScript 代码：

// 1. 定义了名为 info 的修饰器
function info(target){
  // 2. 为目标添加静态 info
  target.info = 'Person info'
}
// 3. 为Person 类应用 info 修饰器
@info
class Person{}
// 4. 打印 Person 的静态属性 info

2、实际开发中，团队对代码格式是有严格要求的，不能由肉眼去检测代码格式，需要使用专业的工具来检测。

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

先完成 Eslint，检测代码格式无误后，在由 Babel 做代码兼容性处理

4.6.2 Eslint

4.6.2.1 Eslint 简介
  • Eslint：可组装的 JavaScript 和 JSX 检查工具。它是用来检测 js 和 jsx 语法的工具，可以配置各项功能
  • 官网：https://eslint.bootcss.com/
  • 使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查

配置文件有很多种写法：

  • ① 在项目根目录新建eslintrc文件，有以下文件名可取，区别在于配置格式不一样
    • .eslintrc
    • .eslintrc.js
    • .eslintrc.json
  • ② package.json 中 eslintConfig：不需要创建文件，在原有文件基础上写

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

4.6.2.2 具体配置

以 .eslintrc.js 形式为例

module.exports = {
  // 解析选项
  parserOptions: {},
  // 具体检查规则
  rules: {},
  // 继承其他规则
  extends: [],
  // 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
};

1、parserOptions 解析选项

parserOptions: {
  ecmaVersion: 6, // ES 语法版本
  sourceType: "module", // ES 模块化
  ecmaFeatures: { // ES 其他特性
    jsx: true // 如果是 React 项目，就需要开启 jsx 语法
  }
}

2、rules 具体规则

  • "off" 或 0 - 关闭规则
  • "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
  • "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
rules: {
  semi: "error", // 禁止使用分号
  'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句，否则警告
  'default-case': [
    'warn', // 要求 switch 语句中有 default 分支，否则警告
    { commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了
  ],
  eqeqeq: [
    'warn', // 强制使用 === 和 !==，否则警告
    'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
  ],
}

更多规则详见：规则文档

3、extends 继承

开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则。

现有以下较为有名的规则：

// 例如在React项目中，可以这样写配置
module.exports = {
  extends: ["react-app"],
  rules: {
    // 这里的规则会覆盖掉react-app的规则
    // 所以想要修改规则直接改就是了
    eqeqeq: ["warn", "smart"],
  },
};
4.6.2.3 在webpack中使用

1、下载包

npm i eslint-webpack-plugin eslint -D

2、定义 Eslint 配置文件(.eslintrc.js)

【示例】

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

3、引入到 webpack.config.js 配置文件，并使用

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

4、运行指令

npx webpack

在控制台查看 Eslint 检查效果

4.6.2.4 VSCode Eslint 插件
  • 打开 VSCode，下载 Eslint 插件，即可不用编译就能看到错误，可以提前解决
  • 此时会对项目所有文件默认进行 Eslint 检查了，我们 dist 目录下的打包后文件就会报错。
  • 只需要检查 src 下面的文件，不需要检查 dist 下面的文件,可以使用 Eslint 忽略文件解决。在项目根目录新建文件：.eslintignore
# 忽略dist目录下所有文件
dist

4.6.3 Babel

  • 介绍：Babel是一个JavaScript 编译器。
  • 中文官网：https://www.babeljs.cn/
  • 作用：用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中
4.6.3.1 配置文件

Babel配置文件有很多种写法：

  • 在项目根目录新建 babel.config.* 文件
    • babel.config.js
    • babel.config.json
  • 在项目根目录新建 .babelrc.* 新建文件
    • .babelrc
    • .babelrc.js
    • .babelrc.json
  • package.json 中 babel：不需要创建文件，在原有文件基础上写

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

4.6.3.2 具体配置

以 babel.config.js 配置文件为例：

module.exports = {
  // 预设
  presets: [],
};

presets 预设简单理解：就是一组 Babel 插件, 扩展 Babel 功能

  • @babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。
  • @babel/preset-react：一个用来编译 React jsx 语法的预设
  • @babel/preset-typescript：一个用来编译 TypeScript 语法的预设
4.6.3.3 在 Webpack 中使用

1、下载包

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

2、定义 Babel 配置文件

module.exports = {
 // 申明 babel 可用的插件
  // 将来，webpack 在调用babel-loader的时候，会先加载预设插件来使用
  presets: ["@babel/preset-env"],
};

4、在 webpack.config.js 中添加 loader 规则

module.exports = {
  module: {
    rules: [
      {
        // 在配置 babel-loader 的时候，程序员只需要把自己的代码进行转换即可；
        test: /\.js$/,
        exclude: /node_modules/, // 一定要排除node_modules，第三方包中的 JS 兼容性，不需要程序员关心
        loader: "babel-loader",
      },
    ],
  },
};

更多babel插件详情请参考 Babel 的官网 https://babeljs.io/docs/en/babel-plugin-proposal-decorators

5. 打包发布

5.1 为什么要打包发布

项目开发完成之后，需要使用 webpack 对项目进行打包发布，主要原因有以下两点：

  • ① 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件
  • ② 开发环境下，打包生成的文件不会进行代码压缩和性能优化

为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。

5.2 配置 webpack 的打包发布

在 package.json 文件的 scripts 节点下，新增 build 命令如下：

"scripts": {
  "dev": "webpack serve", // 开发环境下，运行dev 命令
  "build": 'webpack --mode production' // 项目发布时，运行 build 命令
}

--model 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。

注意：通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项。

5.3 把 JS文件统一生成到 js目录中

在 webpack.config.js 配置文件的 output 节点中，进行如下的配置

output: {
  // 存放的目录
  path: path.resolve(__dirname, "./dist"),
  // 生成的文件名
  filename: "js/bundle.js",
}

5.5 自动清空上次打包资源

为了在每次打包发布时自动清理掉 dist 目录中的旧文件，在webpack.config.js文件的output里添加clean: true即可

output: {
    // 存放的目录
    path: path.resolve(__dirname, "./dist"),// 开发模式没有输出，不需要指定输出目录
    // 生成的文件名
    filename: "js/bundle.js",
    clean: true,//打包前清理 dist 文件夹， 
    // clean 属性，在开发模式没有输出，不需要清空输出结果，要注掉
}

也可以如下安装并配置clean-webpack-plugin插件使用，不过还是上面这个轻松

在这里插入图片描述

6. Source Map

6.1 生产环境遇到的问题

  • 前端项目在投入生产环境之前，都需要对 JavaScript 源代码进行压缩混淆，从而减小文件的体积，提高文件的加载效率。
  • 此时就不可避免的产生了另一个问题：对压缩混淆之后的代码除错（debug）是一件极其困难的事情

在这里插入图片描述
因为：变量被替换成没有任何语义的名称，空行和注释被剔除

6.2 什么是 Source Map

  • Source Map(源代码映射) 就是一个信息文件，里面储存着位里面包含源代码和构建后代码每一行、每一列的映射关系。也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。

  • 它会生成一个 xxx.map 文件，里面包含源代码和构建后代码每一行、每一列的映射关系。

  • 当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。

6.3 webpack 开发环境下的 Source Map

在开发环境下，webpack 默认启用了 Source Map 功能。当程序运行出错时，可以直接在控制台提示错误行的位置，并定位到具体的源代码：

在这里插入图片描述
在这里插入图片描述

6.3.1 默认 Source Map 的问题

开发环境下默认生成的 Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。示意图如下：

在这里插入图片描述
在这里插入图片描述

6.3.2 解决默认 Source Map 的问题

开发环境下，推荐在 webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致：

module.exports = {
  mode: "development",
  // eval-source-map 仅限在'开发模式'下使用，不建议在'生产模式'下使用
  // 此选项生成的Source Map 能够保证'运行时报错的行数' 与 '源代码的行数保持一致'
  devtool: 'eval-source-map',
};

6.4 webpack 生产环境下的 Source Map

在生产环境下，如果省略了 devtool 选项，则最终生成的文件中不包含 Source Map。这能够防止原始代码通过 Source Map 的形式暴露给别有所图之人。

在这里插入图片描述
在这里插入图片描述

6.4.1 只定位行数不暴露源码

在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时可以将 devtool 的值设置为nosources-source-map。实际效果如图所示：

在这里插入图片描述
在这里插入图片描述

6.4.2 定位行数且暴露源码

在生产环境下，如果想在定位报错行数的同时，展示具体报错的源码。此时可以将 devtool 的值设置为source-map。(危险，不推荐)实际效果如图所示：

在这里插入图片描述
在这里插入图片描述
采用此选项后：你应该将你的服务器配置为，不允许普通用户访问 source map 文件！

看到.map结尾的文件，要想到Source Map文件，记录了源码行号信息

6.5 Source Map 的最佳实践

① 开发环境下：

  • 建议把 devtool 的值设置为 eval-source-map
  • 好处：可以精准定位到具体的错误行

② 生产环境下：

  • 建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map
  • 好处：防止源码泄露，提高网站的安全性

知识补充 ：在webpack.config.js中配置下列信息。在路径中引用@时，表示从src这一层往下找

module.exports = {
resolve: {
  alias: {
    // 告诉 webpack ，程序员写的代码中，@ 符号 表示 src这一层目录
    "@": path.join(__dirname, "./src"),
  },
}
}

7. 提升打包构建速度

7.1 HotModuleReplacement

  • 问题：开发时修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。
  • 需求：需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，提高打包速度。
  • 解决方案：HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。
  • 基本使用
module.exports = {
  // 其他省略
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    hot: true, // 开启HMR功能（只能用于开发环境，生产环境不需要了）
  },
};

此时 css 样式经过 style-loader 处理，已经具备 HMR 功能了。 但是 js 还不具备HMR功能。需要在入口文件进行如下配置：

// main.js
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/iconfont.css";
import "./css/index.css";
// 判断是否支持HMR功能
if (module.hot) {
  module.hot.accept("./js/count.js");
  module.hot.accept("./js/sum.js");
}

上面这样写会很麻烦，所以实际开发我们会使用其他 loader 来解决。

比如：vue-loader, react-hot-loader。

7.2 OneOf

  • 问题：打包时每个文件都会经过所有 loader 处理，虽然因为 test 正则原因实际没有处理上，但是都要过一遍，比较慢。
  • OneOf：顾名思义就是只能匹配上一个 loader, 剩下的就不匹配了。
module.exports = {
  module: {
    rules: [
      {
        oneOf: [
          {
            // 用来匹配 .css 结尾的文件
            test: /\.css$/,
            // use 数组里面 Loader 执行顺序是从右到左
            use: ["style-loader", "css-loader"],
          },
          {
            test: /\.less$/,
            use: ["style-loader", "css-loader", "less-loader"],
          },
        ],
      },
    ],
  },
};

7.3 Include/Exclude

  • 问题：开发时需要使用第三方的库或插件，所有文件都下载到 node_modules 中了。而这些文件是不需要编译可以直接使用的。
  • 需求：在对 js 文件处理时，要排除 node_modules 下面的文件。

include：包含，只处理 xxx 文件
exclude：排除，除了 xxx 文件以外其他文件都处理

module.exports = {
  module: {
    rules: [
      {
        oneOf: [
          {
            test: /\.js$/,
            // exclude: /node_modules/, // 排除node_modules代码不编译
            include: path.resolve(__dirname, "../src"), // 也可以用包含，两者选一
            loader: "babel-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules", // 默认值就是node_modules
    }),
  ],
};

7.4 Cache

  • 问题：每次打包时 js 文件都要经过 Eslint 检查 和 Babel 编译，速度比较慢。
    方案：可以缓存之前的 Eslint 检查 和 Babel 编译结果，这样第二次打包时速度就会更快了。
  • Cache：对 Eslint 检查 和 Babel 编译结果进行缓存。
module.exports = {
  module: {
    rules: [
      {
        oneOf: [
          {
            test: /\.js$/,
            include: path.resolve(__dirname, "../src"), 
            loader: "babel-loader",
            options: {
              cacheDirectory: true, // 1. 开启babel编译缓存
              cacheCompression: false, // 2. 缓存文件不要压缩
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules", // 默认值
      cache: true, // 开启缓存
      // 缓存目录
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
    }),
};

7.5 Thead

7.5.1 介绍

  • 问题：当项目越来越庞大时，打包速度越来越慢。
  • 想要继续提升打包速度，其实就是要提升 js 的打包速度，因为其他文件都比较少。
  • 对 js 文件处理主要就是 eslint 、babel、Terser 三个工具，所以要提升它们的运行速度。
  • 解决：可以开启多进程同时处理 js 文件(多进程打包)，这样速度就比之前的单进程打包更快了。

注意：仅在特别耗时的操作中使用，因为每个进程启动就有大约为 600ms 左右开销。

7.5.2 使用

启动进程的数量就是我们 CPU 的核数。

1、获取 CPU 的核数

// nodejs核心模块，直接使用
const os = require("os");
// cpu核数
const threads = os.cpus().length;

2、下载包

npm i thread-loader -D

3、使用时，注意需将此 loader 放置在其他 loader 之前。

const os = require("os");
// 下面插件使用 terser 来压缩 JavaScript。
const TerserPlugin = require("terser-webpack-plugin");
// 下面插件压缩 css
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// 1. 得出cpu核数
const threads = os.cpus().length - 1;
module.exports = {
  module: {
    rules: [
      {
        oneOf: [
          {
            test: /\.js$/,
            include: path.resolve(__dirname, "../src"), 
            use: [
              {
                loader: "thread-loader", // 2. 开启多进程，处理babel
                options: {
                  workers: threads, // 3. 指定数量
                },
              },
              {
                loader: "babel-loader",
                options: {
                  cacheDirectory: true, // 开启babel编译缓存
                },
              },
            ],
          },
        ],
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // ... 省略其他配置
      threads, // 5. ESLint 开启多进程
      // ...
    }),
  ],
  // 在这里对压缩js做配置
  optimization: {
    minimize: true,
    minimizer: [
      // css压缩也可以写到optimization.minimizer里面，效果一样的
      new CssMinimizerPlugin(), // css 压缩
      new TerserPlugin({  // js压缩
        parallel: threads // 压缩js开启多进程
      })
    ],
  },
};

8. 减少代码体积

8.1Tree Shaking

  • 问题：开发时我们定义了一些工具函数库，或者引用第三方工具函数库或组件库，如果没有特殊处理的话，打包时会引入整个库，但是实际上我们可能只用上极小部分的功能。这样将整个库都打包进来，体积就太大了。
  • Tree Shaking 是一个术语，通常用于描述移除 JavaScript 中的没有使用上的代码。注意：它依赖 ES Module。
  • Webpack 已经默认开启了这个功能，无需其他配置。

8.2 处理Babel辅助代码

  • 问题：Babel 为编译的每个文件都插入了辅助代码，使代码体积过大！Babel 对一些公共方法使用了非常小的辅助代码，比如 _extend。默认情况下会被添加到每一个需要它的文件中。你可以将这些辅助代码作为一个独立模块，来避免重复引入。
  • @babel/plugin-transform-runtime: 禁用了 Babel 自动对每个文件的 runtime 注入，而是引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用。

1、下载包

npm i @babel/plugin-transform-runtime -D

2、配置

module.exports = {
  module: {
    rules: [
      {
        oneOf: [
          {
            test: /\.js$/,
            use: [
              {
                loader: "babel-loader",
                options: {
                  plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
                },
              },
            ],
          },
        ],
      },
    ],
  },
};

8.3 Image Minimizer

  • 问题：开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。可以对图片进行压缩，减少图片体积。
  • 注意：如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。
  • image-minimizer-webpack-plugin: 用来压缩图片的插件

1、下载包

npm i image-minimizer-webpack-plugin imagemin -D

2、还有剩下包需要下载，有两种模式：

  • 无损压缩
npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
  • 有损压缩
npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D

3、配置

以无损压缩配置为例：

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        oneOf: [
          {
            test: /\.(png|jpe?g|gif|svg)$/,
            type: "asset",
          },
        ],
      },
    ],
  },
  optimization: {
    minimizer: [
      // 压缩图片
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminGenerate,
          options: {
            plugins: [
              ["gifsicle", { interlaced: true }],
              ["jpegtran", { progressive: true }],
              ["optipng", { optimizationLevel: 5 }],
              [
                "svgo",
                {
                  plugins: [
                    "preset-default",
                    "prefixIds",
                    {
                      name: "sortAttrs",
                      params: {
                        xmlnsOrder: "alphabetical",
                      },
                    },
                  ],
                },
              ],
            ],
          },
        },
      }),
    ],
  },
};

若打包时会出现如下报错，则需要安装两个文件到 node_modules 中才能解决

Error: Error with 'src\images\1.jpeg': '"C:\Users\86176\Desktop\webpack\webpack_code\node_modules\jpegtran-bin\vendor\jpegtran.exe"'
Error with 'src\images\3.gif': spawn C:\Users\86176\Desktop\webpack\webpack_code\node_modules\optipng-bin\vendor\optipng.exe ENOENT

jpegtran.exe：需要复制到 node_modules\jpegtran-bin\vendor 下面

jpegtran 官网地址

optipng.exe：需要复制到 node_modules\optipng-bin\vendor 下面

OptiPNG 官网地址

9. 尾巴

实际开发中会使命令行工具（俗称 CLI）一键生成带有 webpack 的项目；开箱即用，所有 webpack 配置项都是现成的！以上作为webpack 中的基本概念了解即可！

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值