npm与webpack的学习笔记

news2024/9/23 5:23:30

npm

定义：npm是Node.js标准的软件包管理器。它起初是作为下载和管理Node.js包依赖的方式，但其现在也已成为前端JavaScript中使用的工具。

包

包：将模块、代码、其他资料聚合成一个文件夹

包的分类：

  • 项目包：主要用于编写项目和业务逻辑
  • 软件包：封装工具和方法进行使用

要求：根目录中，必须有package.json文件（记录包的清单信息）

注意：导入软件包时，引入的默认时index.js模块文件 / main属性指定的模块文件

在这里插入图片描述

npm - 软件包管理器

使用：

  1. 初始化清单文件：npm init -y (得到package.json文件，有则略过此命令)
  2. 下载软件包：npm i 软件包名称
  3. 使用软件包

package-lock.json文件的作用是固定软件包版本。

npm - 安装所有依赖

  • 项目中不含node_modules，不能正常运行，因为缺少依赖本地的软件包，自己用npm下载依赖比磁盘传递拷贝快得多。
  • 项目终端输入命令npm i可以下载package.json中记录的所有软件包。

npm - 全局软件包nodemon

软件包区别：

  • 本地软件包：当前项目内使用，封装属性和方法，存在于node_modules
  • 全局软件包：本机所有项目使用，封装命令和工具，存在于系统设置的位置

nodemon作用：替代node命令，检测代码更改，自动重启程序。

使用：

  1. 安装：npm i nodemon -g（ -g 代表安装到全局环境中）
  2. 运行：nodemon 待执行的目标js文件

Webpack

定义：一个用于现代JavaScript应用程序的静态模块打包工具。

  • 静态模块：指的是编写代码过程中的html、css、js、图片等固定内容的文件
  • 打包：把静态模块内容压缩、整合、转译等（前端工程化）
    • 把less / sass转成css代码
    • 把ES6+降级成ES5
    • 支持多种模块标准语法

使用Webpack

需求：封装utils包，校验手机号长度和验证码长度，在src/index.js中使用并打包观察。

步骤：

  1. 新建并初始化项目，编写业务源代码
  2. 下载webpack webpack-cli到当前项目中（版本独立），并配置局部自定义命令
  3. 运行打包命令，自动产生dist分发文件夹（压缩和优化后，用于最终运行的代码）

修改Webpack打包入口和出口

Webpack配置：影响Webpack打包过程和结果。

步骤：

  1. 项目根目录，新建webpack.config.js配置
  2. 导出配置对象，配置入口、出口文件的路径
  3. 重新打包观察

注意：只有和入口产生直接/间接的引入关系，才会被打包

自动生成html文件

插件html-webpack-plugin：在Webpack打包时生成html文件。

步骤：

  1. 下载html-webpack-plugin本地软件包 npm i html-webpack-plugin --save-dev

  2. 配置webpack.config.js让Webpack拥有插件功能

    在这里插入图片描述

  3. 重新打包观察效果

打包CSS代码

注意：Webpack默认只识别js代码

加载器css-loader：解析css代码

加载器style-loader：把解析后的css代码插入到DOM

步骤：

  1. 准备css文件代码引入到src/login/index.js中（压缩转译处理等）

  2. 下载css-loader和style-loader本地软件包 npm i css-loader style-loader --save-dev

  3. 配置webpack.config.js让Webpack拥有该加载器功能

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

优化 - 提取css代码

插件mini-css-extract-plugin：提取css代码。

好处：css文件可以被浏览器缓存，减少js文件体积

注意：不能和style-loader一起使用，需要Webpack5才能正常工作

步骤：

  1. 下载mini-css-extract-plugin本地软件包npm install --save-dev mini-css-extract-plugin

  2. 配置webpack.config.js让Webpack拥有该插件功能

    const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

  3. 打包后观察效果

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

优化 - 压缩过程

使用css-minimizer-webpack-plugin插件可以解决css代码提取后没有压缩的问题。

步骤：

  1. 下载cs-minimizer-webpack-plugin本地软件包npm install css-minimizer-webpack-plugin --save-dev

  2. 配置webpack.config.js让webpack拥有该功能

    const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释（保证js代码能被压缩处理）
      // `...`,
      new CssMinimizerPlugin(),
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

  3. 打包重新观察

打包less代码

加载器less-loader：把less代码编译位css代码。

注意：less-loader需要配合less软件包使用，如果既有css文件又有less文件，需要关闭vscode里的easy less插件。

步骤：

  1. 新建less代码（设置背景图）并引入到src/login/index.js中

  2. 下载less和less-loader本地软件包 npm i less less-loader --save-dev

  3. 配置webpack.config.js让webpack拥有功能

    module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
};

打包图片

资源模块：Webpack5内置资源模块（字体、图片等）打包，无需额外loader。

注意：判断临界值默认位8KB

  • 大于8KB的文件：发送一个单独的文件并导出URL地址
  • 小于8KB的文件：导出一个data URI（base64字符串）

步骤：

  • 配置webpack.config.js让Webpack拥有打包图片功能。

    • 占位符 [hash] 对模块内容做算法计算，得到映射的数字字母组合的字符串

    • 占位符 [ext] 使用当前模块原本的占位符，例如：.png / .jpg 等字符串

    • 占位符 [query] 保留引入文件时代码中的查询参数（只有URL下生效

module.exports = {
  module: {
   rules: [
      {
        test: /\.(png|jpg|gif)$/i,
       	type: 'asset',
        generator: {
            filename: 'assets/[hash][ext][query]'
        }
      },
   ]
  },
}

搭建开发环境

问题：之前改代码，需要重新打包才能运行查看，效率很低。

开发环境：配置webpack-dev-server快速开发应用程序。

作用：启动Web服务，自动检测代码变化，热更新到网页。

注意：dist目录和打包内容是在内存里（更新快）

步骤：

  1. 下载webpack-dev-server软件包到当前项目 npm i webpack-dev-server --save-dev

  2. 设置模式位开发模式module.exports = { mode: 'development' }，并配置自定义命令"scripts: { "build": "webpack", "dev": "webpack serve --open"}

  3. 使用npm run dev来启动开发服务器

注意：

  • webpack-dev-server借助http模块创建8080默认Web服务
  • 默认以public文件夹作为服务器根目录
  • webpack-dev-server根据配置

打包模式

打包模式：告知Webpack使用相应模式的内置优化。

分类：

模式名称模式名字特点场景
开发模式development调试代码，实时加载，模块热替换等本地开发
生产模式production压缩代码，资源优化，更轻量等打包上线

设置：

  1. 方法1：在webpack.config.js配置文件设置mode选项

    • module.exports = {
    // ...
    mode: 'production'
}

  2. 方法2：在package.json命令行设置mode参数

    • "scripts": {
    "build": "webpack --mode=production",
    "dev": "webpack serve --mode=development"
},

注意：命令行设置的优先级高于配置文件的，推荐命令行设置。

打包模式的应用

需求：在开发模式下用style-loader内嵌更快，在生产模式下提取css代码

方案一：webpack.config.js配置导出函数，但是局限性大（只接受2种模式）

方案二：借助corss-env（跨平台通用）包命令，设置参数区分环境

  • 步骤：

    1. 下载cross-env软件包到当前项目npm i cross-env --save-dev

    2. 配置自定义命令，传入参数名和值（会绑定到process.env对象下）

      • "scripts": {
    "test": "echo \"Error: no test speckfied\" && exit 1",
    "build": "cross-env webpack --mode=development",
    "dev": "cross-env NODE_ENV=develogment webpack serve --open --mode=development"
},

    3. 在webpack.config.js区分不同环境使用不同配置

    4. 重新打包观察

方案3：配置不同的webpack.config.js（适用多种模式差异性较大情况）

Webpack向前端注入环境变量

需求：前端项目中，开发模式下打印语句生效，生产模式下打印语句失效。

问题：cross-env设置的只在Node.js环境生效，前端代码无法访问process.env.NODE_ENV

解决：使用Webpack内置的DefinePlugin插件。

作用：在编译时，将前端代码中匹配的变量名，替换为值或表达式。

开发环境调错 - source map

问题：代码被压缩和混肴，无法正确定位源代码位置（行数和列数）

source map：可以准确追踪error和warning在原始代码的位置。

设置：webpack.config.js配置devtool选项。

module.exports = {
    devtool: 'inline-source-map'
};

inline-source-map选项：把源码的位置信息一起打包在js文件内。

注意：source map仅适用于开发环境，不要在生产环境使用（防止被轻易查看源代码位置）

Webpack解析别名

解析别名：配置模块如何解析，创建import引入路径的别名，来确保模块引入变得简单。

例如：原来路径比较长而且相对路径不安全。

举例：

配置前：import {checkPhone, checkCode} from '../src/utils/check.js'

配置webpack.config.js：

const config = {
    resolve: {
        alias:{
            '@': path.resolve(__dirname, 'src')
        }
    }
}

配置后：import {checkPhone, checkCode} from '@/utils/check.js'

优化 - CDN使用

CDN定义：内容分发网络，指的是一组分布在各个地区的服务器。

作用：把静态资源文件/第三方库放在CDN网络中各个服务器中，共用户就近请求获取。

好处：减轻自己服务器的请求压力，就近请求物理延迟低，配套缓存策略。

需求：开发模式使用本地第三方库，生产模式下使用CDN加载引入

步骤：

  1. 在html中引入第三方库的CDN地址并用模板语法判断
  2. 配置webpack.config.js中externals外部扩展选项（防止某些import的包被打包）
  3. 两种模式下的打包观察效果

多页面打包

单页面：单个html文件，切换DOM的方式实现不同的业务逻辑展示，后续Vue/React会学到

多页面：多个html文件，切换页面实现不同业务逻辑展示

步骤：

  1. 准备源码（html、css、js）放入相应位置，并改用模块化语法导出。
  2. 下载form-serialize包并导入到核心代码中使用
  3. 配置webpack.config.js多入口和多页面的设置
  4. 重新打包观察效果

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

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

相关文章

upload-labs-靶场（1-19关详细解答 保姆级教程）

upload-labs-靶场（1-19关详细解答 保姆级教程）

Pass-01 下载 upload-labs-mster靶场 创建一个upload目录 不然无法打开upload-labs 靶场 1.我们先上传一个 php后缀文件 显示我们该文件不允许上传 只能上传 jpg png gif的文件后缀 2.我们可以上传 自己写的php 后缀改成jpg上传 然后抓包 可以看到 数据上传了 我们可以在burps…
阅读更多...
5.缓存雪崩问题及解决思路

5.缓存雪崩问题及解决思路

缓存雪崩问题及解决思路 缓存雪崩是指在同一时段大量的缓存key同时失效或者Redis服务宕机，导致大量请求到达数据库，带来巨大压力。 解决方案： 给不同的Key的TTL添加随机值利用Redis集群提高服务的可用性给缓存业务添加降级限流策略给业务添…
阅读更多...
用EasyV全景图低成本重现真实场景，360°感受数字孪生

用EasyV全景图低成本重现真实场景，360°感受数字孪生

全景图，即借助绘画、相片、视频、三维模型等形式，通过广角的表现手段，尽可能多表现出周围的环境。避免了一般平面效果图视角单一，不能带来全方位视角的缺陷，能够全方位的展示360度球型范围内的所有景致，最大…
阅读更多...
maven插件1(timer-plugin)

maven插件1(timer-plugin)

[https://maven.apache.org/plugin-developers/index.html(https://maven.apache.org/plugin-developers/index.html) 概述 timer plugin, 提供4个goal: currentTimecurrentDatecurrentMonthcurrentYear 打包 命令 maven clean install 常见错误 goalPrefix MISSING 错…
阅读更多...
记录一次环境的安装

记录一次环境的安装

目录 新添加的代码 代码解释 为啥ubuntu用debian软件源 为啥修改sources.list.d S权限意思 php缺少和数据库连接的模块 使用root登陆数据库1698错误 字段解释 auth_socket解释 使用root登陆数据库方法 详细解释 首先在安装的时候，有一个dockerfile文件&a…
阅读更多...
SpringBoot 依赖之Java Mail Sender邮件发送

SpringBoot 依赖之Java Mail Sender邮件发送

Java Mail Sender 依赖名称: Java Mail Sender功能描述: Send email using Java Mail and Spring Framework’s JavaMailSender.使用 Java Mail 和 Spring Framework 的 JavaMailSender 发送电子邮件。 <dependency><groupId>org.springframework.boot</group…
阅读更多...
机器学习模型选择与优化: 打造智能IDS

机器学习模型选择与优化: 打造智能IDS

引言 面对琳琅满目的机器学习模型&#xff0c;你是否也感到无从下手&#xff1f;别担心&#xff0c;这篇文章将为你详细讲解各种模型的优缺点&#xff0c;帮助你选择最适合的模型&#xff0c;并进行优化。是时候给你的入侵检测系统装上最强“大脑”了! 机器学习模型概述 监…
阅读更多...
java2~~~

java2~~~

类变量 [修饰符] class 类{[其他修饰符] static 数据类型 变量名; } static 用来修饰的结构&#xff1a;属性、方法; 代码块、内部类&#xff1b;&#xff08;构造器不能够用static修饰&#xff09;当类被加载进内存时&#xff0c;静态成员变量随着类一起进入方法区&#xff…
阅读更多...
VMware安装Win10系统（保姆级教程）

VMware安装Win10系统（保姆级教程）

需要自己先下载并安装VMware 和Win10系统镜像&#xff1a; VMware官网&#xff1a;VMware - Delivering a Digital Foundation For Businesses Win10下载地址&#xff1a;MSDN,我告诉你 1.新建虚拟机设置 2.启动Win10虚拟机设置 注意&#xff1a; 当出现有字体的时候&#…
阅读更多...
“论云原生架构及其应用”写作框架软考高级论文系统架构设计师论文

“论云原生架构及其应用”写作框架软考高级论文系统架构设计师论文

论文真题 近年来&#xff0c;随着数字化转型不断深入&#xff0c;科技创新与业务发展不断融合&#xff0c;各行各业正在从大工业时代的固化范式进化成面向创新型组织与灵活型业务的崭新模式。在这一背景下&#xff0c;以容器和微服务架构为代表的云原生技术作为云计算服务的新…
阅读更多...
行为验证码——错误代码解释

行为验证码——错误代码解释

错误代码 前端请求展示错误代码 前端验证错误代码 后端验签错误代码 内容素材的地址:https://www.kgcaptcha.com/docs?vid56&namecwdm
阅读更多...
【.NET 8 实战--孢子记账--从单体到微服务】--编写服务端框架

【.NET 8 实战--孢子记账--从单体到微服务】--编写服务端框架

框架是一个项目所必须的&#xff0c;是一组预先编写的代码库和工具&#xff0c;提供了一个可以复用的结构&#xff0c;以帮助开发者快速构建应用程。即使项目目前是一个单体应用&#xff0c;我们还是需要先设计框架的&#xff0c;但是我们不可能在项目的初期就编写出一个完美的…
阅读更多...
C语言例题（图形打印，逆序输出，交换数组，平均值）

C语言例题（图形打印，逆序输出，交换数组，平均值）

一.X形图形 多组输入&#xff0c;一个整数&#xff08;2~20&#xff09;&#xff0c;表示输出的行数&#xff0c;也表示组成“X”的反斜线和正斜线的长度。针对每行输入&#xff0c;输出用“*”组成的X形图案。 代码展示 #include <stdio.h> int main() {int i0;int j…
阅读更多...
鸿蒙对接极光推送时候报错1000900010，厂商token获取失败

鸿蒙对接极光推送时候报错1000900010，厂商token获取失败

在AppGallery Connect上配置项目的调试证书&#xff0c;然后手动导入&#xff0c;不要用IDE的自动构建证书&#xff1a; https://developer.huawei.com/consumer/cn/service/josp/agc/index.html#/
阅读更多...
大模型简介以及该如何学习的路线

大模型简介以及该如何学习的路线

人人都看得懂的大模型简介 大模型就像一座庞大的图书馆&#xff0c;里面有非常多的书籍。但与普通图书馆不同的是&#xff0c;这座图书馆中的每本书都是关于不同事物的描述和知识。而这些书籍中的每一页都代表了这个事物的一些特征或细节。现在&#xff0c;想象一下&#xff0c…
阅读更多...
KVM高级功能部署

KVM高级功能部署

kvm虚拟机迁移 静态迁移(拷贝) 关闭虚拟机 拷贝 磁盘镜像 .xml配置文件 操作方便 动态迁移 动态迁移分为基于共享存储的动态迁移和基于数据块的动态迁移 基于共享存储的动态迁移 利用共享存储,存磁盘镜像,存配置文件速度快不用关虚拟机 基于数据块…
阅读更多...
OCCT使用指南：Foundation Classes

OCCT使用指南：Foundation Classes

1、介绍 本手册解释了如何使用Open CASCADE Technology (OCCT) Foundation Classes。它提供了关于基础类的基础文档。有关基础类及其应用的高级信息&#xff0c;请参阅我们的电子学习和培训产品。 基础类提供各种通用服务&#xff0c;如自动动态内存管理&#xff08;通过句柄操…
阅读更多...
抖店到家外卖重新布局，本地生活服务商创业机遇再现

抖店到家外卖重新布局，本地生活服务商创业机遇再现

自抖音平台去年推出团购、外卖、小时达等即时零售业务以来&#xff0c;这一举措不仅重塑了本地生活服务领域的竞争格局&#xff0c;也为众多拥有线下门店的商家开辟了全新的增长路径。众多商家敏锐捕捉到了这一市场机遇&#xff0c;纷纷入驻短视频平台&#xff0c;利用平台的强…
阅读更多...
c基础 函数

c基础 函数

函数 1.函数基本用法 1.1定义和三要素 函数是一个完成特定功能的代码模块&#xff0c;其程序代码独立&#xff0c;通常要求有返回值&#xff0c;也可以是空值。 三要素&#xff1a;功能 参数 返回值 参数&#xff1a;参数就是在函数声明时和函数调用时定义的变量。它用于传递…
阅读更多...
钟氏崛起的奥秘：归隐与清议

钟氏崛起的奥秘：归隐与清议

话题的主角是钟皓&#xff0c;东汉后期人&#xff0c;颍川钟氏的第十代。他官做的不大&#xff0c;最高职务是一个小县的县长&#xff08;俸禄400石&#xff09;&#xff0c;远远没有父、祖辈高&#xff0c;父亲做到了光禄大夫、太守&#xff08;2000石&#xff09;。然而&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023