Webpack模式-Resolve-本地服务器

目录

  • Resolve
  • Mode配置
  • 搭本地服务器
  • 区分环境配置

Resolve

前面学习时使用了各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库，在 Webpack 中，resolve 是用于解析模块依赖的配置项，它决定了 Webpack 如何找到项目中的模块文件

  • resolve 作用：

    • 当你在代码中 import 或 require 一个模块时、resolve 配置可以帮助 Webpack 定义如何解析这些模块路径，特别是在处理文件扩展名、路径别名、模块目录等方面

    • webpack 使用 enhanced-resolve 来解析文件路径

  • 解析三种文件路径：

    • 绝对路径：这种情况下，不需要再做进一步解析

    • 相对路径：

      在这种情况下，使用 import 或 require 的资源文件所处的目录，被认为是上下文目录

      在 import/require 中给定的相对路径，会拼接此上下文路径，来生成模块的绝对路径

    • 模块路径：

      在 resolve.modules 中指定的所有目录检索模块，默认值目录是 ['node_modules']，所以默认会从node_modules中查找文件

      可以通过设置别名的方式来替换初始模块路径

  • 解析引入文件和文件夹：

    • 引入文件：

      如果文件具有扩展名，则直接打包文件

      否则，将使用 resolve.extensions 选项作为文件扩展名解析

    • 引入文件夹：

      在文件夹中根据 resolve.mainFiles 配置选项中指定的文件顺序查找

      resolve.mainFiles的默认值是 ['index']

      再根据 resolve.extensions 来解析扩展名

  • resolve 常用属性：
    在这里插入图片描述

    • extensions：

      解析到文件时自动添加扩展名，告诉 Webpack 在导入语句中省略文件扩展名时，它应该查找哪些扩展名

      默认值是 ['.wasm', '.mjs', '.js', '.json']

      如果代码中想添加加载 .vue 或者 jsx 或者 ts 等文件时，必须自己写上扩展名

    • alias：用于定义路径别名，可以通过别名缩短路径，可以使用 @ 代替长路径

    • modules：用于指定模块查找的目录，默认情况下 Webpack 只会查找 node_modules 文件夹，通过 modules 选项，可以为 Webpack 指定其他的查找目录

    • mainFields：告诉 Webpack 在解析模块的 package.json 时优先使用哪些字段，通常用于库的 package.json 中，常见的字段有 main, module 和 browser

    • mainFiles：指定文件查找时的入口文件名，默认是 index

    • symlinks：控制 Webpack 是否遵循符号链接（symlink），默认为 true

Mode配置

前面我们学习webpack打包相关文件时，有个警告我们一直没有看，这就是需要配置mode，接下来学习mode
在这里插入图片描述
在 Webpack 中，mode 是一个重要的配置项，用于设置构建模式。它影响 Webpack 的行为和输出，决定了构建时是否开启优化（如压缩代码、调试工具等）

mode 有三个值：
在这里插入图片描述

  • development（开发模式）：用于开发环境，提供调试支持和快速构建
    在这里插入图片描述

    • 特点：

      开启调试功能

      输出的代码不会被压缩，以便于调试

      启用 eval 作为 devtool，生成代码映射（source maps），方便调试源码

      开启了增量编译，构建速度较快

    • 内置优化：

      devtool: 'eval' (快速生成 source maps)

      启用更有利于调试的错误提示

  • production（生产模式）：用于生产环境，进行代码压缩和各种优化，生成小体积的高效代码
    在这里插入图片描述

    • 特点：

      启用各种优化功能，以减少输出的文件体积和提高性能

      代码会被压缩（通过 TerserPlugin）

      自动去除未引用的代码（Tree Shaking）

      生成优化的 source maps（可选，通常关闭）

    • 内置优化：
      TerserPlugin（用于压缩 JavaScript 代码）

      mode: 'production' 会自动将 devtool 设为 false，取消 source map 以减少文件体积

      通过 Tree Shaking 去除未引用代码

      通过 DefinePlugin 将 process.env.NODE_ENV 设置为 "production"

  • none（无模式）：禁用所有内置的优化，用于完全自定义配置的场景
    在这里插入图片描述

    • 特点：

      禁用所有默认优化

      适用于自定义优化的场景

更多的mode配置：
在这里插入图片描述

搭本地服务器

目前开发的代码，为了运行需要有两个操作：npm run build编译相关的代码，通过live server或者直接通过浏览器，打开index.html代码查看效果。这个操作会影响开发效率，希望做到当文件发生变化时，可以自动的完成编译和展示

为了完成自动编译，webpack提供了几种可选的方式：

  • webpack watch mode

  • webpack-dev-server（常用）

  • webpack-dev-middleware

在 Webpack 中搭建本地服务器通常通过使用 webpack-dev-server 来实现。webpack-dev-server 是一个方便的开发工具，它为你提供一个轻量级的 HTTP 服务器，并能实时监控文件的变化，自动重新加载页面

  • npm install webpack-dev-server -D：安装

  • 修改配置文件，启动时加上serve参数在这里插入图片描述

  • webpack-dev-server 在编译之后不会写入到任何输出文件，而是将打包文件保留在内存中

  • 事实上webpack-dev-server使用了一个库叫memfs（memory-fs webpack自己写的）

  • 都配置完可以执行npm run serve，但如果你前面配置loader和plugins都是看我前面的文章练习的，这时会打包成功，但是访问http://localhost:8080/是空白的
    在这里插入图片描述

配置选项说明：

  • devServer：打包后不会生成打包文件

    • static.directory：本地服务器所提供服务的文件目录

    • compress：是否是否为静态文件启用 gzip 压缩，默认false，提高页面的加载性能
      在这里插入图片描述

    • host：设置主机地址，默认值是localhost，如果希望其他地方也可以访问，可以设置为 0.0.0.0

      localhost 和 0.0.0.0 的区别：

      1. localhost： 本质上是一个域名，通常情况下会被解析成127.0.0.1

      2. 127.0.0.1： 回环地址(Loop Back Address)，表达的意思其实是我们主机自己发出去的包，直接被自己接收

      3. 正常的数据库包经过 应用层 - 传输层 - 网络层 - 数据链路层 - 物理层，而回环地址是在网络层直接就被获取到了，是不会经过数据链路层和物理层的

      4. 比如我们监听 127.0.0.1 时，在同一个网段下的主机中，通过ip地址是不能访问的

      5. 0.0.0.0： 监听IPV4上所有的地址，再根据端口找到不同的应用程序，比如我们监听 0.0.0.0时，在同一个网段下的主机中，通过ip地址是可以访问的

    • port：指定服务器监听的端口号（例如 9000），不指定默认为 8080

    • open：启动服务器时自动打开浏览器，自动导航到 localhost:port

    • openPage：自动打开配置的页面

    • hot：开启模块热替换（HMR），默认已经开启，实现页面的局部更新而不重新加载整个页面，开启后浏览器中可以看到如下效果，修改入口文件还是会全局刷新的
      在这里插入图片描述

      HMR的全称是Hot Module Replacement，翻译为模块热替换，它是指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面

      HMR通过如下几种方式，来提高开发的速度：

      1. 不重新加载整个页面，这样可以保留某些应用程序的状态不丢失

      2. 只更新需要变化的内容，节省开发的时间

      3. 修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式

      如果发现当修改了某一个模块的代码时，依然是刷新的整个页面，这是因为需要去指定哪些模块发生更新时进行HMR，在实际项目中我们不需要自己设置的

      vue开发中，使用vue-loader，此loader支持vue组件的HMR，提供开箱即用的体验

      react开发中，有React Hot Loader，实时调整react组件（目前React官方已经弃用了，改成使用react-refresh）
      在这里插入图片描述

    • historyApiFallback：如果启用了 HTML5 的 History API（用于单页应用），需要该配置项来重定向所有 404 到首页。否则，在子页面刷新时可能找不到对应资源

配置整体代码参考：

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader/dist/index");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    clean: true,
    filename: "index.js",
    path: path.resolve(__dirname, "build"),
  }, 
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      '@utils': path.resolve(__dirname, 'src/utils'),
    },
    extensions: ['.js', '.vue', '.json'],
  },
  devServer: {
    static: {
      directory: path.resolve(__dirname, 'build'), // 服务器内容的目录
    },
    compress: true, // 启用 gzip 压缩
    port: 9000, // 指定服务器端口号
    open: true, // 自动打开浏览器
    open: ['main.html'], // 自动打开浏览器并定向到http://localhost:9000/main.html
    hot: true, // 热更新
    historyApiFallback: true, // 支持HTML5的历史API（单页应用中很有用）
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "haahha",
      template: "./public/index.html",
      filename: "main.html",
      minify: {
        collapseWhitespace: true, // 移除空白
        removeComments: true, // 移除注释
        removeAttributeQuotes: true, // 移除属性的引号
      },
    }),
    new DefinePlugin({
      BASE_URL: '"./"',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset",
        generator: {
          filename: "image/[name].[hash:8][ext]",
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024, // 这时使用的图片没有超过这个值他就不会被打包成文件，而是转base64使用
          },
        },
      },
      {
        test: /\.m?js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
            },
          },
        ],
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },
};

区分环境配置

  • 目前我们所有的webpack配置信息都是放到一个配置文件中的：XXXX.config.js

  • 但某些配置是在开发环境需要使用的，某些配置是在生成环境需要使用的，当然某些配置是在开发和生成环境都会使用的

  • 当配置越来越多时这个文件会变得越来越不容易维护，最好对配置进行划分，方便我们维护和管理

如何区分不同的配置：

  • 建立config文件夹编写开发和生产配置文件

  • 抽取公共的配置，并与开发和生产配置合并

  • 添加不同的打包脚本
    在这里插入图片描述

// wk.comm.config.js
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader/dist/index");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "build"),
  }, 
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      '@utils': path.resolve(__dirname, 'src/utils'),
    },
    extensions: ['.js', '.vue', '.json'],
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      title: "haahha",
      template: "./public/index.html",
      filename: "main.html",
      minify: {
        collapseWhitespace: true, // 移除空白
        removeComments: true, // 移除注释
        removeAttributeQuotes: true, // 移除属性的引号
      },
    }),
    new DefinePlugin({
      BASE_URL: '"./"',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset",
        generator: {
          filename: "image/[name].[hash:8][ext]",
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024, // 这时使用的图片没有超过这个值他就不会被打包成文件，而是转base64使用
          },
        },
      },
      {
        test: /\.m?js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
            },
          },
        ],
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },
};



// wk.dev.config.js
const path = require("path");
const { merge } = require('webpack-merge')
const commonConfig = require('./wk.comm.config')

module.exports = merge(commonConfig, {
  mode: "development",
  devServer: {
    static: {
      directory: path.resolve(__dirname, 'build'), // 服务器内容的目录
    },
    compress: true, // 启用 gzip 压缩
    port: 9000, // 指定服务器端口号
    open: true, // 自动打开浏览器
    open: ['main.html'], // 自动打开浏览器并定向到http://localhost:9000/main.html
    hot: true, // 热更新
    historyApiFallback: true, // 支持HTML5的历史API（单页应用中很有用）
  },
});


// wk.prod.config.js
const { merge } = require('webpack-merge')
const commonConfig = require('./wk.comm.config')

module.exports = merge(commonConfig, {
  mode: "production",
  output: {
    clean: true,
  }, 
});

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

爬虫——爬取小音乐网站

爬虫——爬取小音乐网站

爬虫有几部分功能？？？ 1.发请求，获得网页源码 #1.和2是在一步的 发请求成功了之后就能直接获得网页源码 2.解析我们想要的数据 3.按照需求保存 注意：开始爬虫前，需要给其封装 headers {User-…
阅读更多...
计算机网络（十） —— IP协议详解，理解运营商和全球网络

计算机网络（十） —— IP协议详解，理解运营商和全球网络

目录 一，关于IP 1.1 什么是IP协议 1.2 前置认识 二，IP报头字段详解 三，网段划分 3.1 IP地址的构成 3.2 网段划分 3.3 子网划分 3.4 IP地址不足问题 四，公网IP和私有IP 五，理解运营商和全球网络 六&#xff…
阅读更多...
openpnp - 底部相机高级校正的参数设置

openpnp - 底部相机高级校正的参数设置

文章目录 openpnp - 底部相机高级校正的参数设置概述笔记修改 “Radial Lines Per Calibration Z” 的方法不同 “Radial Lines Per Calibration Z”的校验结果不同 “Radial Lines Per Calibration Z”的设备校验动作的比较总结备注END openpnp - 底部相机高级校正的参数设置 …
阅读更多...
学籍管理平台|在线学籍管理平台系统|基于Springboot+VUE的在线学籍管理平台系统设计与实现(源码+数据库+文档)

学籍管理平台|在线学籍管理平台系统|基于Springboot+VUE的在线学籍管理平台系统设计与实现(源码+数据库+文档)

在线学籍管理平台系统 目录 基于SpringbootVUE的在线学籍管理平台系统设计与实现 一、前言 二、系统功能设计 三、系统实现 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取： 博主介绍：✌️大…
阅读更多...
Linux·进程概念(下)

Linux·进程概念(下)

1. 进程优先级 优先级就是获得某种资源的先后顺序，因为CPU资源是有限的，因此各个进程之间要去争取CPU的资源。 那么针对Linux操作系统下的PCB中，也就是task_struct结构体中，使用了int类型的变量记录了每个进程的优先级属性&#x…
阅读更多...
“米哈游悄然布局未来科技：入股星海图，共绘具身智能机器人新篇章“

“米哈游悄然布局未来科技：入股星海图，共绘具身智能机器人新篇章“

米哈游悄然入股具身智能机器人公司：技术布局与未来展望 近日，米哈游阿尔戈科技有限公司宣布入股具身智能机器人公司星海图，这一消息在行业内引起了广泛关注。米哈游，这家以游戏开发而闻名的企业，近年来正逐步扩大其在人工智能和新兴科技领域的投资布局，此次入股星海图正是…
阅读更多...
数组指针和指针数组

数组指针和指针数组

引用：【数组指针】 仅此一篇 让你深刻理解数组指针-CSDN博客 b站：【动画讲解C语言指针-14-数组指针和指针数组】 https://www.bilibili.com/video/BV1Qj421U75U/?share_sourcecopy_web&vd_sourced59dcee6044af8fc880b46b581c3f58a 指向数组和指向…
阅读更多...
Windows Ubuntu下搭建深度学习Pytorch训练框架与转换环境TensorRT

Windows Ubuntu下搭建深度学习Pytorch训练框架与转换环境TensorRT

Windows Ubuntu下搭建深度学习Pytorch训练框架与转换环境TensorRT JetBrains2024（IntelliJ IDEA、PhpStorm、RubyMine、Rider……）安装包Anaconda Miniconda安装.condarc 文件配置镜像源查看conda的配置和源(channel)自定义conda虚拟环境路径conda常用命…
阅读更多...
双指针：滑动窗口

双指针：滑动窗口

题目描述 给定两个字符串 S 和 T，求 S 中包含 T 所有字符的最短连续子字符串的长度，同时要求时间复杂度不得超过 O(n)。 输入输出样例 输入是两个字符串 S 和 T，输出是一个 S 字符串的子串。样例如下： 在这个样例中&#xff0c…
阅读更多...
在树莓派上部署开源监控系统 ZoneMinder

在树莓派上部署开源监控系统 ZoneMinder

原文：https://blog.iyatt.com/?p17425 前言 自己搭建，可以用手里已有的设备，不需要额外买。这套系统的源码是公开的，录像数据也掌握在自己手里，不经过不可控的三方。 支持设置访问账号 可以保存录像，启…
阅读更多...
C++中，如何使你设计的迭代器被标准算法库所支持。

C++中，如何使你设计的迭代器被标准算法库所支持。

iterator（读写迭代器） const_iterator（只读迭代器） reverse_iterator（反向读写迭代器） const_reverse_iterator（反向只读迭代器） 以经常介绍的_DList类为例，它的迭代…
阅读更多...
QT--基础

QT--基础

将默认提供的程序都注释上意义 0101.pro QT core gui #QT表示要引入的类库 core：核心库 gui：图形化界面库 #如果要使用其他库类中的相关函数，则需要加对应的库类后，才能使用 greaterThan(QT_MAJOR_VERSION, 4): QT wid…
阅读更多...
算法: 二分查找题目练习

算法: 二分查找题目练习

文章目录 二分查找二分查找在排序数组中查找元素的第一个和最后一个位置搜索插入位置x 的平方根山脉数组的峰顶索引寻找峰值寻找旋转排序数组中的最小值点名 总结精华模版 二分查找 二分查找 没啥可说的,轻轻松松~ class Solution {public int search(int[] nums, int target…
阅读更多...
栈的介绍与实现

栈的介绍与实现

一. 概念与结构 栈：⼀种特殊的线性表，其只允许在固定的⼀端进⾏插⼊和删除元素操作。进⾏数据插⼊和删除操作的⼀端称为栈顶，另⼀端称为栈底。栈中的数据元素遵守后进先出LIFO（Last In First Out的原则。 压栈：栈的插…
阅读更多...
二叉树进阶学习——从前序和中序遍历序列构造二叉树

二叉树进阶学习——从前序和中序遍历序列构造二叉树

1.题目解析 题目来源：105.从前序与中序遍历序列构造二叉树——力扣 测试用例 2.算法原理 首先要了解一个概念 前序遍历：按照 根节点->左子树->右子树的顺序遍历二叉树 中序遍历：按照 左子树->根节点->右子树的顺序遍历二叉树 题目…
阅读更多...
在 Kali Linux 中安装 Impacket

在 Kali Linux 中安装 Impacket

步骤 1：更新系统 打开终端并确保你的系统是最新的： sudo apt update && sudo apt upgrade -y 步骤 2：安装依赖 在安装 Impacket 之前，你需要确保安装了 Python 和一些必要的依赖。通常，Kali 已经预装了 Pytho…
阅读更多...
影刀RPA实战：Excel拆分与合并工作表

影刀RPA实战：Excel拆分与合并工作表

1.影刀操作excel的优势 Excel，大家都不陌生，它是微软公司推出的一款电子表格软件，它是 Microsoft Office 套件的一部分。Excel 以其强大的数据处理、分析和可视化功能而闻名，广泛应用于商业、教育、科研等领域。可以说&#xff0…
阅读更多...
YOLO11改进|注意力机制篇|引入ELA注意力机制

YOLO11改进|注意力机制篇|引入ELA注意力机制

目录 一、【ELA】注意力机制1.1【ELA】注意力介绍1.2【ELA】核心代码 二、添加【ELA】注意力机制2.1STEP12.2STEP22.3STEP32.4STEP4 三、yaml文件与运行3.1yaml文件3.2运行成功截图 一、【ELA】注意力机制 1.1【ELA】注意力介绍 这篇论文的作者通过分析Coordinate Attention(C…
阅读更多...
Java Supplier和Consumer接口

Java Supplier和Consumer接口

Supplier 在Java中，Supplier接口是一个重要的函数式接口，它属于java.util.function包，Supplier通常用于延迟计算或生成值的场景。Supplier接口是一个泛型接口，其get()方法不接受任何参数但返回一个泛型类型T的值。 这个接口被注解…
阅读更多...
STM32新建工程-基于库函数

STM32新建工程-基于库函数

目录 一、创建一个新工程 二、为工程添加文件和路径 三、创建一个main.c文件，并调试 四、修改一些配置 五、用库函数进行写程序 1、首先加入一些库函数和头文件 2、编写库函数程序 一、创建一个新工程 我这里选择STM32F103C8的型号，然后点击OK。 …
阅读更多...
最新文章

Copyright @ 2022~2023