详细总结Webpack5的配置和使用

news2024/11/24 6:04:58

打包工具

使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 CSS预处理器等语法进行开发的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、CSS 等语法，才能运行。
所以需要打包工具帮我们做完这些事。除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。

有哪些打包工具？
Grunt、Gulp、Parcel、Webpack、Rollup、Vite

webpack是什么

webpack是一种前端静态资源打包工具。在webpack看来,前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器段运行了。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。
在这里插入图片描述
Webpack 本身功能是有限的:
开发模式：仅能编译 JS 中的 ES Module 语法
生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码

webpack五个核心概念

1.Entry
入口(Entry)指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。
2.Output
输出(Output)指示webpack打包后的资源bundles输出到哪里去，以及如何命名。
3.Loader
Loader让webpack能够去处理那些非JavaScript文件(webpack自身只理解JavaScript)。
4.Plugins
插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
5.Mode
模式(Mode)指示webpack使用相应模式的配置。
在这里插入图片描述

webpack基本使用

npm init -y 初始化一个包描述文件，运行后会生成package.json
启用 Webpack(开发模式)：npx webpack ./src/main.js --mode=development，后续写了配置文件每次就直接npx webpack
成功标志：
在这里插入图片描述
默认 Webpack 会将文件打包输出到 dist 目录下。

webpack基本配置

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

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // 入口文件输出路径
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    // clean: true, // 自动将上次打包目录资源清空
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范

处理样式资源

Webpack 本身是不能识别样式资源(Css、Less、Sass、Scss、Styl)的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源。

处理 CSS 资源

需要下载两个 loader：npm i css-loader style-loader -D
css-loader：负责将 CSS文件编译成 Webpack 能识别的模块
style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 CSS 模块内容。
用法：在webpack.config.js里的rules加入：

rules: [
  {
    // 用来匹配 .css 结尾的文件
    test: /\.css$/,
    // use 数组里面 Loader 执行顺序是从右到左
    use: ["style-loader", "css-loader"],
  },
],

src/css/index.css：

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

src/main.js：

import count from "./js/count";
// 引入 Css 资源，Webpack才会对其打包
import "./css/index.css";

console.log(count(2, 1));

public/index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <!-- 准备一个使用样式的 DOM 容器 -->
    <div class="box1"></div>
    <!-- 引入打包后的js文件，才能看到效果 -->
    <script src="../dist/static/js/main.js"></script>
  </body>
</html>

运行指令：npx webpack，打开 index.html 页面查看效果。

其他(Less、Sass、Scss、Styl)一个道理，按照官网配置即可。

处理图片资源

用法：在webpack.config.js里的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]",
  },
},

对图片资源进行优化：将小于某个大小的图片转化成 data URI 形式（Base64 格式，优点：减少请求数量；缺点：体积变得更大），图片以 data URI 形式内置到 js 中了，不会输出到dist。 （注意：需要将上次打包生成的文件清空，再重新打包才有效果）

Webpack 会将所有打包好的图片资源输出到 dist 目录下，样式资源经过 style-loader 的处理，打包到 main.js 里面去了，所以没有额外输出出来。

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

处理js资源

Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以要做一些兼容性处理。其次开发中，团队对代码格式是有严格要求的，需要使用专业的工具来检测。针对 js 兼容性处理，使用 Babel 来完成；针对代码格式，使用 Eslint 来完成。

Eslint

用来检测 js 和 jsx 语法的工具，在Eslint 配置文件里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查。
1.下载包：npm i eslint-webpack-plugin eslint -D

2.定义 Eslint 配置文件.eslintrc.js：

module.exports = {
  // 继承 Eslint 规则
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  parserOptions: {// 解析选项
    ecmaVersion: 6, // ES 语法版本
    sourceType: "module", // ES 模块化
    ecmaFeatures: { // ES 其他特性
      jsx: true // 如果是 React 项目，就需要开启 jsx 语法
  	}
  },
  rules: {
    "no-var": 2, // 不能使用 var 定义变量
  },
};

rules 具体规则：
“off” 或 0 - 关闭规则
“warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
“error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

extends 继承：开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则：
Eslint 官方的规则：eslint:recommended
Vue Cli 官方的规则：plugin:vue/essential
React Cli 官方的规则：react-app

3.修改main.js

4.配置webpack.config.js：

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

5.运行指令：npx webpack

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

# 忽略dist目录下所有文件
dist

Babel

JavaScript 编译器，主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
1.下载包：npm i babel-loader @babel/core @babel/preset-env -D

2.定义 Babel 配置文件babel.config.js：

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

presets 预设：就是一组 Babel 插件, 扩展 Babel 功能。
@babel/preset-env: 一个智能预设，允许使用最新的 JavaScript。
@babel/preset-react：一个用来编译 React jsx 语法的预设。
@babel/preset-typescript：一个用来编译 TypeScript 语法的预设。

3.修改main.js

4.配置webpack.config.js：
在rules里增加：

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

5.运行指令：npx webpack

处理 Html 资源

1.下载包：npm i html-webpack-plugin -D
2. 配置webpack.config.js：

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

3.修改 index.html：去掉引入的 js 文件，因为 HtmlWebpackPlugin 会自动引入。
4.运行指令：npx webpack

自动化

每次写完代码都需要手动输入指令才能编译代码，太麻烦了，下面使用开发服务器来自动化。
1.下载包：npm i webpack-dev-server -D
2.配置webpack.config.js：

module.exports = {
  // 添加开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
};

3.运行指令：npx webpack serve
注意：当使用开发服务器时，所有代码都会在内存中编译打包，并不会输出到 dist 目录下。开发时其实只关心代码能运行有效果即可，至于代码被编译成什么样子并不需要知道。

生产模式

生产模式是开发完成代码后，我们需要得到代码将来部署上线。这个模式下主要优化代码运行性能和代码打包速度。原本的webpack.config.js变成两个了。
文件目录：

├── webpack-test (项目根目录)
    ├── config (Webpack配置文件目录)
    │    ├── webpack.dev.js(开发模式配置文件)
    │    └── webpack.prod.js(生产模式配置文件)
    ├── node_modules (下载包存放目录)
    ├── src (项目源码目录，除了html其他都在src里面)
    │    └── 略
    ├── public (项目html文件)
    │    └── index.html
    ├── .eslintrc.js(Eslint配置文件)
    ├── babel.config.js(Babel配置文件)
    └── package.json (包的依赖管理配置文件)

文件目录变了，所以所有相对路径需要回退一层目录才能找到对应的文件，需要修改修改 webpack.dev.js：

path: undefined, // 开发模式没有输出，不需要指定输出目录
// clean: true, // 开发模式没有输出，不需要清空输出结果
context: path.resolve(__dirname, "../src"),
template: path.resolve(__dirname, "../public/index.html"),

运行开发模式的指令：npx webpack serve --config ./config/webpack.dev.js

修改 webpack.prod.js：

path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
mode: "production",

运行生产模式的指令：npx webpack --config ./config/webpack.prod.js

配置快捷运行指令

为了方便运行不同模式的指令，将指令定义在 package.json 中 scripts 里面：

// package.json
{
  // 其他省略
  "scripts": {
    "start": "npm run dev",
    "dev": "npx webpack serve --config ./config/webpack.dev.js",
    "build": "npx webpack --config ./config/webpack.prod.js"
  }
}

以后启动指令：(start不用加run，其他需要加)
开发模式：npm start 或 npm run dev
生产模式：npm run build

单独处理CSS

CSS文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式，这样对于网站来说，会出现闪屏现象，用户体验不好，应该是单独的 CSS文件，通过 link 标签加载性能才好。
1.下载包：npm i mini-css-extract-plugin -D
2.配置webpack.prod.js：

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

3.运行指令：npm run build

CSS兼容性处理

1.下载包：npm i postcss-loader postcss postcss-preset-env -D
2.配置webpack.prod.js：

rules:[
  {
    test: /\.less$/,
    use: [
      MiniCssExtractPlugin.loader,
      "css-loader",
      {
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            plugins: [
              "postcss-preset-env", // 能解决大多数样式兼容性问题
            ],
          },
        },
      },
      "less-loader",
    ],
  },
]

当配置多了的情况下，上面的兼容性处理会略显冗余，所以可以抽象成个函数合并配置：

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};
……

rules:[
  {
   // 用来匹配 .css 结尾的文件
    test: /\.css$/,
    // use 数组里面 Loader 执行顺序是从右到左
    use: getStyleLoaders(),
  },
  {
    test: /\.less$/,
    use: getStyleLoaders("less-loader"),
  },
  {
    test: /\.s[ac]ss$/,
    use: getStyleLoaders("sass-loader"),
  },
]

3.控制兼容性：可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度。

{
  // 其他省略
  "browserslist": ["last 2 version", "> 1%", "not dead"]
}

3.运行指令：npm run build

CSS压缩

1.下载包：npm i css-minimizer-webpack-plugin -D
2.配置webpack.prod.js：

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
plugins: [
  // css压缩
    new CssMinimizerPlugin(),
],

3.运行指令：npm run build

默认生产模式已经开启了：html 压缩和 js 压缩，不需要额外进行配置。

参考文档

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/781410.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

微信小程序学习笔记（三）——视图与逻辑

微信小程序学习笔记（三）——视图与逻辑

页面导航 什么是页面导航 页面导航指的是页面之间的相互跳转。例如&#xff0c;浏览器中实现页面导航的方式有如下两种&#xff1a; <a> 链接location.href 小程序中实现页面导航的两种方式 声明式导航、 在页面上声明一个 <navigator> 导航组件通过点击 <…
阅读更多...
R语言手动安装包

R语言手动安装包

包安装问题解决方案 1. Biocmanager安装 2. 手动安装 文章目录 包安装问题解决方案前言一、Rstudio手动安装二、conda手动安装R包2.1 在Linux环境中使用R2.2 anaconda官网包下载 总结 前言 大家好✨&#xff0c;这里是bio&#x1f996;。点赞关注不迷路。在上一篇blog中为大家…
阅读更多...
Tabby - 本地化AI代码自动补全 - Linux Debian

Tabby - 本地化AI代码自动补全 - Linux Debian

参考&#xff1a; https://github.com/TabbyML/tabby Docker | Tabby Linux Debian上快速安装Docker并运行_Entropy-Go的博客-CSDN博客 Tabby - 本地化AI代码自动补全 - Windows10_Entropy-Go的博客-CSDN博客 为什么选择Tabby 已经有好几款类似强劲的代码补全工具&#xf…
阅读更多...
自动驾驶感知系统-摄像头

自动驾驶感知系统-摄像头

车载摄像头的工作原理&#xff0c;首先是采集图像&#xff0c;将图像转换为二维数据&#xff1b;然后&#xff0c;对采集的图像进行模式识别&#xff0c;通过图像匹配算法识别行驶过程中的车辆、行人、交通标识等&#xff1b;最后&#xff0c;依据目标物体的运动模式或使用双目…
阅读更多...
(202307)wonderful-sql:基础查询与排序(task2)

(202307)wonderful-sql:基础查询与排序(task2)

教程链接&#xff1a;Datawhale - 一个热爱学习的社区 知识学习 前提&#xff1a; 上一次任务中提出了本课程的用表&#xff0c;但是我并没有加入这个表&#xff0c;这次学习前先对这个表进行插入。 INSERT INTO product VALUES(0001, T恤衫, 衣服, 1000, 500, 2009-09-20)…
阅读更多...
[Linux笔记]gdb调试器常用指令

[Linux笔记]gdb调试器常用指令

gcc/g形成的可执行程序默认是release版的。若要生成debug版&#xff0c;应使用-g选项。 如&#xff1a;gcc -o mytest test.c -g -stdc99 可以看到debug版包含了调试信息&#xff1a; 使用&#xff1a;gdb 文件名&#xff1a; 补充&#xff1a; 以下所有的查看指令都不会影…
阅读更多...
CMU 15-445 -- Parallel Execution - 11

CMU 15-445 -- Parallel Execution - 11

CMU 15-445 -- Join Algorithms - 11 引言Parallel & DistributedInter-query vs. Intra-query Parallelism Process ModelApproach #1: Process per DBMS WorkerApproach #2: Process PoolApproach #3: Thread per DBMS Worker Execution ParallelismInter-query Parallel…
阅读更多...
基于SpringBoot+vue的滴答拍摄影项目设计与实现

基于SpringBoot+vue的滴答拍摄影项目设计与实现

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…
阅读更多...
JAVA设计模式——23种设计模式详解

JAVA设计模式——23种设计模式详解

一、什么是设计模式&#x1f349; 设计模式&#xff08;Design pattern&#xff09; 是解决软件开发某些特定问题而提出的一些解决方案也可以理解成解决问题的一些思路。通过设计模式可以帮助我们增强代码的可重用性、可扩充性、 可维护性、灵活性好。我们使用设计模式最终的目…
阅读更多...
基于物联网网关的工业数据可视化平台有什么功能？

基于物联网网关的工业数据可视化平台有什么功能？

随着数字化浪潮的不断发展&#xff0c;工业数据的价值越来越重要。在企业利用数据的过程中&#xff0c;数据可视化是数字化系统中十分重要的一部分。然而&#xff0c;工厂多种设备、多种协议影响到系统的搭建使得企业无法获得全面的数据视图&#xff0c;也无法对整个生产流程进…
阅读更多...
Ubuntu22.04 安装深度学习服务器全纪录

Ubuntu22.04 安装深度学习服务器全纪录

文章目录 Ubuntu 22.04 安装深度学习服务器全纪录1. 制作启动盘2. 安装 Ubuntu 22.043.配置国内镜像软件源4. Python 相关设置5. 配置 SSH6. 配置远程桌面6. 安装 CUDA7. 安装 docker8. 安装 Anaconda9. 安装 ChatGLM210. 使用 fastllm 推理加速 Ubuntu 22.04 安装深度学习服务…
阅读更多...
【100天精通python】Day8：数据结构_元组Tuple的创建、删除、访问、修改、推导系列操作

【100天精通python】Day8：数据结构_元组Tuple的创建、删除、访问、修改、推导系列操作

目录 1 创建元组 2 删除元组 3 访问元组元素 4 多个值的同时赋值和交换 5 修改元组元素 6 元组推导式 7 元组运算符 8 元组常用场景 9 元组&#xff08;Tuple&#xff09;和列表&#xff08;List&#xff09;的区别 元组&#xff08;tuple&#xff09;是 Python 中的…
阅读更多...
Codeforces Round 886 (Div. 4)

Codeforces Round 886 (Div. 4)

目录 A. To My Critics B. Ten Words of Wisdom C. Word on the Paper D. Balanced Round E. Cardboard for Pictures F. We Were Both Children G. The Morning Star A. To My Critics time limit per test1 second m…
阅读更多...
《qt quick核心编程》笔记一

《qt quick核心编程》笔记一

1.基础HelloWorld代码 import QtQuick 2.15 import QtQuick.Window 2.15 import QtQuick.Controls 2.15Window {width: 400height: 300visible: truetitle: qsTr("Hello 1World")Rectangle {width: parent.widthheight: parent.heightcolor: "gray"Text {…
阅读更多...
RabbitMQ惰性队列使用

RabbitMQ惰性队列使用

说明&#xff1a;惰性队列是为了解决消息堆积问题&#xff0c;当生产者生产消息的速度远高于消费者消费消息的速度时&#xff0c;消息会大量的堆积在队列中&#xff0c;而队列中存放的消息数量是有限的&#xff0c;当超出数量时&#xff0c;会造成消息的丢失。而扩容队列&#…
阅读更多...
Homography单应性矩阵

Homography单应性矩阵

1. Homography 单应性概念 考虑 同一个平面(比如书皮)的两张图片&#xff0c;红点表示同一个物理坐标点在两张图片上的各自位置。在 CV 术语中&#xff0c;我们称之为对应点。 Homography 就是将一张图像上的点映射到另一张图像上对应点的3x3变换矩阵. 因为 Homography 是一个 …
阅读更多...
AtcoderABC237场

AtcoderABC237场

A - Not OverflowA - Not Overflow 题目大意 题目要求判断给定的整数N是否在范围[-231, 231-1]内&#xff0c;如果是则输出"Yes"&#xff0c;否则输出"No"。 思路分析 位运算&#xff1a;由于题目中的范围是2的幂次方&#xff0c;可以使用位运算来进行快…
阅读更多...
Elasticsearch/Enterprise Search/Kibana安装记录

Elasticsearch/Enterprise Search/Kibana安装记录

目录 Elasticsearch的安装导入 elasticsearch PGP密钥 安装使用APT安装手动下载安装 启动elasticsearch安全功能重新配置节点以加入现有集群启用系统索引的自动创建功能运行Elasticsearch(在systemd下)检查Elasticsearch是否正在运行Elasticsearch配置外网访问 第三方包安装ela…
阅读更多...
flex局部的知识总结

flex局部的知识总结

一、Flex布局的基本概念。 &#xff08;1&#xff09;Flex布局&#xff1a; 任何一个容器都可以指定为Flex布局。 注意&#xff1a;设为Flex布局以后&#xff0c;子元素的float、clear和vertical-align属性将失效。 &#xff08;2&#xff09;Flex容器&#xff1a;采用Flex布局…
阅读更多...
Linux环境下Elasticsearch相关软件安装

Linux环境下Elasticsearch相关软件安装

Linux环境下Elasticsearch相关软件安装 本文将介绍在linux(Centos7)环境下安装Elasticsearch相关的软件。 1、安装Elasticsearch 1.1 Elasticsearch下载 首先去Elasticsearch官网下载相应版本的安装包&#xff0c;下载之后传输到linux服务器上。 官网地址&#xff1a;http…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023