npm与webpack的学习笔记

2301_796143792024-07-29 15:49

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拥有该加载器功能

    js 复制代码 
    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拥有该插件功能

    js 复制代码 
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");

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

  3. 打包后观察效果

js 复制代码 
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拥有该功能

    js 复制代码 
    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拥有功能

    js 复制代码 
    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下生效

js 复制代码 
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选项

    js 复制代码 
    module.exports = {
    // ...
    mode: 'production'
}

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

    js 复制代码 
    "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对象下）

      js 复制代码 
      "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选项。

js 复制代码 
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：

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. 重新打包观察效果
相关推荐
贾saisai15 分钟前
Xilinx系FPGA学习笔记（九）DDR3学习
笔记·学习·fpga开发
北岛寒沫19 分钟前
JavaScript（JS）学习笔记 1（简单介绍 注释和输入输出语句 变量 数据类型 运算符 流程控制 数组）
javascript·笔记·学习
铁匠匠匠2 小时前
从零开始学数据结构系列之第六章《排序简介》
c语言·数据结构·经验分享·笔记·学习·开源·课程设计
架构文摘JGWZ3 小时前
Java 23 的12 个新特性！！
java·开发语言·学习
小齿轮lsl3 小时前
PFC理论基础与Matlab仿真模型学习笔记（1）--PFC电路概述
笔记·学习·matlab
Aic山鱼4 小时前
【如何高效学习数据结构：构建编程的坚实基石】
数据结构·学习·算法
qq11561487074 小时前
Java学习第八天
学习
天玑y4 小时前
算法设计与分析（背包问题
c++·经验分享·笔记·学习·算法·leetcode·蓝桥杯
2301_789985944 小时前
Java语言程序设计基础篇_编程练习题*18.29(某个目录下的文件数目)
java·开发语言·学习
橄榄熊4 小时前
Windows电脑A远程连接电脑B
学习·kind
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04Coze扣子平台完整体验和实践（附国内和国际版对比）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10浏览器插件——ModHeader 的分享和学习