webpack5_相关知识点

webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) ，是前端资源模块化管理和打包工具， 它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过 loader转换， 任何形式的资源都可以当做模块， 比如Commons JS、AMD、ES 6、CSS、JSON、Coffee Script、LESS等。

一、概念

依赖环境：Node JS16+

下载并安装Node。

Node下载安装相关内容点击链接看这个文章icon-default.png?t=N7T8https://blog.csdn.net/zxy19931069161/article/details/138838537?spm=1001.2014.3001.5502

为什么需要打包：开发时用到的框架（React、Vue）,ES6模块化语法、LESS/SASS等CSS预处理器等语法进行开发，这样代码想在浏览器运行必须编译成浏览器识别的JS、CSS、等语法才能运行。所以需要打包工具做这些，除此之外还有压缩代码、兼容性处理、提升代码性能等。一些打包工具：（Webpack、Grunt、Gulp、Parcel、Rollup、Vite等）

Webpack基本概念：是一个静态资源打包工具，它会以一个或多个文件作为打包的入口，将整个项目的所有文件编译成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器运行了。将webpack输出的文件叫做bundle。

Webpack本身功能是有限的：

        开发模式：仅能编译ES Module语法。

        生产模式：能编译JS中ES Module语法，还能压缩JS代码。

但可以通过各种插件完成相关功能。

二、建一个Webpack项目

1.新建项目文件夹

项目名称webpack-code,并用编辑器或cmd打开，使用终端进行以下步骤。

2.初始化项目

webpack-code文件夹中初始化一个package.json文件和package-lock.json文件。

npm init -y

package.json文件和package-lock.json文件区别：

npm5以前

npm5以前，没有package-lock.json这个文件。

package.json 是一个描述项目的元数据文件。它包含了项目的名称、版本、作者、许可证等信息。当你执行npm install的时候，node会先从package.json文件中读取所有dependencies信息，然后根据dependencies中的信息与node_modules中的模块进行对比，没有的直接下载，已有的检查更新。

因为package.json只能锁定模块的大版本号（版本号的第一位），不能锁定后面的小版本，所以你每次重新npm install时候拉取的都是该大版本下面最新的版本。一般我们为了稳定性考虑我们不能随意升级依赖包，因为如果换包导致兼容性bug出现很难排查，这样很容易出现问题，所以package-lock.json就是来解决包锁定不升级问题的。另外，package.json文件只记录你通过npm install方式安装的模块信息，而这些模块所依赖的其他子模块的信息不会记录。

npm5以后

package-lock.json文件锁定所有模块的版本号，包括主模块和所有依赖子模块。当你执行npm install的时候，node从package.json文件读取模块名称，从package-lock.json文件中获取版本号，然后进行下载或者更新。因此，正因为有了package-lock.json文件锁定版本号，所以当你执行npm install的时候，node不会自动更新package.json文件中的模块，必须用npm install packagename@x.x.x（指定版本号）来进行安装才会更新，package-lock.json文件中的版本号也会随着更新。

3.webpack-code项目资源目录

4.下载Webpack：
npm i webpack

npm i webpack-cli

webpack -v   //检查webpack是否下载成功返回版本

5.启动Webpack:

开发模式终端输入： npx webpack ./src/main.js --mode=development

生产模式终端输入： npx webpack ./src/main.js --mode=production

npx是什么：

npx是一个由Node.js官方提供的用于快速执行npm包中的可执行文件的工具。它可以帮助我们在不全局安装某些包的情况下，直接运行该包提供的命令行工具。npx会在执行时，检查本地项目中是否安装了对应的依赖，如果没有安装则会自动下载安装，并执行命令。如果本地已经存在该依赖，则直接执行命令。

6.Webpack 的五大核心概念：

        1.entry（入口）: 指示webpack从哪个文件开始打包。

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

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

        4.plugins（插件）：扩展webpack的功能。

        5.node（模式）：主要有两种模式（开发模式：development）（生产模式：production）

7.添加webpack配置文件：

webpack-code项目根目录下创建一个配置文件 webpack.config.js


const path = require("path");
// path是node.js的核心模块，用来处理文件路径
 
module.exports = {
    // 入口,相对路径和绝对路径都行
    entry: "./src/main.js",
    output: {
        // path: 文件输出目录，必须是绝对路径
        // path.resolve()方法返回一个绝对路径
        // __dirname 当前文件的文件夹绝对路径
        path: path.resolve(__dirname, "dist"),
        // filename: 输出文件名
        filename: "main.js",
    },
    module: {
        rules: [],
    },
    plugins: [],
    mode: "development", 
};

配置完成以后使用 npx webpack 就可以运行项目。

8.打包示例：

在创建的src->js目录下->sum.js里面添加内容：

export default function sum(a, b) {
    return a + b
}

在main.js 里面通过import 引用sum.js：

import sum from './js/sum.js'
console.log(sum(1, 2));

 执行 npx webpack，则打包后main.js在dist文件夹下。

在public->index.html文件中引入main.js。

<!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>Document</title>
</head>
 
<body>
    <script src="../../dist/main.js"></script>
    <h2>hello webpack</h2>
</body>
 
</html>

此时控制台输出了sum（1，2）的结果

9.自动清空上次打包内容：

自动删除上次的dist。在webpack.config.js的output中filename下添加clean:true。当设置为 true 时，webpack 在每次构建之前会自动清理目标文件夹。这可以确保每次构建时都会生成一个干净的输出文件夹，删除旧的构建结果。

    output: {
        filename: "main.js", //在下面添加
        clean: true,
    },
10.Webpack处理js文件：

webpack对js处理有限，只能编译js中ES模块化语法，不能编译其他语法，由于某些浏览器不支持ES6，所以使用ES6写的JavaScript程序不能在这些浏览器中运行，需要进行兼容。（一些不支持ES6的浏览器：IE浏览器、苹果内置浏览器、PC版微信内置浏览器、旧版本的Chrome等）。

        ①针对js兼容性处理：用Babel完成。

        ②针对代码格式，用ESlint（用来检测js和jsx的语法工具）完成。

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

ESlint使用方法icon-default.png?t=N7T8https://webpack.docschina.org/plugins/eslint-webpack-plugin/#rootBabel使用方法icon-default.png?t=N7T8https://webpack.docschina.org/loaders/babel-loader/#root

11.自动生成html文件：

public下的index.html是我们手动写的还需要引入打包后的文件。可以通过插件来自动生成一个index.html（在dist文件夹下）,里面直接自动引入所有打包后的文件。使用npx webpack打包后，我们就可以直接运行dist文件夹下的index.html。

自动生成html步骤icon-default.png?t=N7T8https://webpack.docschina.org/plugins/html-webpack-plugin#root

12.搭建开发服务器&自动化：

每次写完代码手动输入指令才能编译代码，改完代码需要打包完成后运行dist文件夹下的index.html才能看到效果，现在改为自动化,一旦发现变化就自动打包。

        ①下载：npm i webpack-dev-server -D

        ②使用：在webpack.config.js中和plugins同级添加

 plugins: [],

 devServer: {
    host: 'localhost', //启动服务器域名
    port: '3000',      //启动服务器端口号
    open:  true,       //是否自动打开浏览器
 },

        ③打包 npx webpack 后，serve 指令运行服务器（服务器一直开启，代码改动自动编译，浏览器自动刷新）。如想停止服务器运行，点击键盘ctrl+c即可。

13.打包css文件：

打包css相关方法icon-default.png?t=N7T8https://webpack.docschina.org/plugins/mini-css-extract-plugin#root

css兼容性相关处理icon-default.png?t=N7T8https://webpack.docschina.org/loaders/postcss-loader/

14.生产模式与开发模式：

生产模式（也就是上线模式）是开发完成代码后，我们需要得到打包后的代码将来部署上线。这个模式下我们主要对代码进行压缩和优化，让其运行性能更好。

优化主要从两个角度出发：

        ①优化代码运行性能。

        ②优化代码打包速度。

针对生产环境和开发环境我们需要两套配置文件将之前的webpack.config.js拆分为两个文件。

首先在webpack-code文件夹下创建一个文件夹叫config，config文件夹下创建两个文件：

        ①webpack.dev.js      //开发环境配置

        ②webpack.prod.js    //生产环境配置

然后通过package.json配置简化运行指令。

webpack.dev.js文件:

开发环境启用devserver开发服务器，会自动编译内容到内存环境，所以这里output的配置可以取消。因为配置文件都放到了config文件夹内，所有，全部的绝对路径都要回退一级。相对路径不需要，因为相对路径是相对我们命令运行的路径（命令运行的路径始终是根目录）。


const path = require("path");
// path是node.js的核心模块，用来处理文件路径
 
module.exports = {
    entry: "./src/main.js",
    output: {
       // path: path.resolve(__dirname, "../dist"),  //dist改为../dist
       //filename: "main.js",
       // clean:true,
    },
    module: {
        rules: [],
    },
    plugins: [],

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

    mode: "development", 
};

webpack.prod.js文件:

生产环境要配置文件编译输出目录，和文件清空上一次的配置（clean:true）。绝对路径也要回退上一级目录。相对路径相对命令运行目录不需要改变。开发服务器配置(devServer)可以去掉。

const path = require("path");
// path是node.js的核心模块，用来处理文件路径
 
module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, "../dist"),  //dist改为../dist
        filename: "main.js",
        clean:true,
    },
    module: {
        rules: [],
    },
    plugins: [],

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

    mode: "production", 
};

package.json文件:

在“scripts“里面配置

// package.json
{
  // 其他省略
  "scripts": {
    "start": "npm run dev", //运行dev指令
    "dev": "npx webpack serve --config ./config/webpack.dev.js", //运行开发环境配置并启动服务器
    "build": "npx webpack --config ./config/webpack.prod.js"  //运行生产环境编译打包指令
  }
}

启动项目指令：

        ①开发模式：npm start 或 npm run dev

        ②生产模式：npm run build

15.Webpack中文文档：

Webpack中文文档icon-default.png?t=N7T8https://webpack.docschina.org/concepts/

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

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

相关文章

Python 读取.shp文件并生成图幅编号

Python 读取.shp文件并生成图幅编号

代码适用于需要处理和分析地理空间数据的场景&#xff0c;如城市规划、环境监测或自然资源管理&#xff0c;其中它可以帮助用户读取特定区域的Shapefile文件&#xff0c;确定其地理边界&#xff0c;并基于这些边界计算出按照经纬度5度间隔的图幅编号&#xff0c;进而用于地图制…
阅读更多...
Hive环境搭建

Hive环境搭建

1 安装Hive 下载文件 # wget -P /opt/ https://mirrors.huaweicloud.com/apache/hive/hive-2.3.8/apache-hive-2.3.8-bin.tar.gz 解压缩 # tar -zxvf /opt/apache-hive-2.3.8-bin.tar.gz -C /opt/ 修改hive文件夹名字 # mv /opt/apache-hive-2.3.8-bin /opt/hive 配置环境变量 …
阅读更多...
力扣HOT100 - 138. 随机链表的复制

力扣HOT100 - 138. 随机链表的复制

解题思路&#xff1a; class Solution {public Node copyRandomList(Node head) {if(headnull) return null;Node p head;//第一步&#xff0c;在每个原节点后面创建一个新节点//1->1->2->2->3->3while(p!null) {Node newNode new Node(p.val);newNode.next …
阅读更多...
场景文本检测识别学习 day10（MMdetection）

场景文本检测识别学习 day10（MMdetection）

配置文件(config) 由于在大型项目中&#xff0c;一种模型需要分&#xff1a;tiny、small、big等很多种&#xff0c;而它们的区别主要在网络结构&#xff0c;数据的加载&#xff0c;训练策略等&#xff0c;且差别很多都很小&#xff0c;所以如果每个模型都手动从头写一份&#…
阅读更多...
文生图模型演进：AE、VAE、VQ-VAE、VQ-GAN、DALL-E 等 8 模型

文生图模型演进：AE、VAE、VQ-VAE、VQ-GAN、DALL-E 等 8 模型

节前&#xff0c;我们星球组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学。 针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 合集&#x…
阅读更多...
【强训笔记】day24

【强训笔记】day24

NO.1 思路&#xff1a;递归。 代码实现&#xff1a; class Solution { public:bool IsBalanced_Solution(TreeNode* pRoot) {return dfs(pRoot)!-1;}int dfs(TreeNode* root){if(rootnullptr) return 0;int leftdfs(root->left);if(left-1) return -1;int rightdfs(root-…
阅读更多...
如何使用甘特图来做任务管理？zz-plan甘特图的实践指南

如何使用甘特图来做任务管理？zz-plan甘特图的实践指南

在项目管理和任务调度中&#xff0c;甘特图是一种非常实用的工具&#xff0c;它可以帮助团队成员清晰地规划、执行和跟踪项目进度。然而&#xff0c;如何有效利用甘特图进行任务管理&#xff0c;对于许多团队来说仍然是一个挑战。本文将结合 zz-plan https://zz-plan.com/ 甘特…
阅读更多...
jmeter服务器性能监控分析工具ServerAgent教程

jmeter服务器性能监控分析工具ServerAgent教程

ServerAgent介绍&#xff1a;支持监控CPU&#xff0c;memory&#xff0c;磁盘&#xff0c;网络等&#xff0c;和JMeter集成&#xff0c;在JMeter的图形界面中&#xff0c;可以实时看到监控的数据&#xff0c;但是&#xff0c;它只能监控硬件资源使用情况。 不能监控应用服务 S…
阅读更多...
天若OCR 识别 (本地文字识别转换工具)

天若OCR 识别 (本地文字识别转换工具)

前言 天若OCR文字识别本地版是一款在天若OCR文字识别工具v5.0免费开源版的基础上采用Chinese-lite框架和Paddle-ocr框架本地化识别接口编译而成,无需联网也无需申请密钥&#xff0c;纯本地运算&#xff0c;识别准确度和速度很快&#xff0c;操作和天若OCR免费版一样&#xff0…
阅读更多...
解决：error: failed to push some refs to ‘https://gitee.com/***/***.git‘（高效快速）

解决：error: failed to push some refs to ‘https://gitee.com/***/***.git‘（高效快速）

解决方案&#xff1a; git pull --rebase origin master 具体原因&#xff1a; 主要原因是gitee(github)中的README.md文件不在本地代码目录中 要执行git pull --rebase origin master命令将README.md拉到本地 然后就可以执行git push啦 写在最后&#xff1a; 要是问题得到…
阅读更多...
实验四 网络的路径与连通性

实验四 网络的路径与连通性

文章目录 4.1 网络的路径与连通性第1关&#xff1a;路径与初始距离矩阵的构建第2关&#xff1a;由网络邻接矩阵求初始距离矩阵方法第3关&#xff1a;网络中任意两点的最短路径求解 4.2 网络连通性第1关&#xff1a;网络节点间的可达性判断第2关&#xff1a;邻接矩阵转换可达矩阵…
阅读更多...
Java基础之 API 字符串

Java基础之 API 字符串

文章目录 API字符串String概述创建对象 java的内存模型java的常用方法(比较)练习 API 概念: APl(Application ProgrammingInterface): 应用程序编程接口 简单理解: API就是别人已经写好的东西&#xff0c;我们不需要自己编写&#xff0c;直接使用即可。 Java API: 指的就是J…
阅读更多...
Ubuntu20.04安装ffmpeg，并捕获视频流

Ubuntu20.04安装ffmpeg，并捕获视频流

工控机&#xff1a;幻影峡谷 系统&#xff1a;Ubuntu20.04 摄像头&#xff1a;杰瑞微通环星光USB摄像头记录一下使用ffmpeg拉取视频流的原因&#xff1a;刚开始用的是ubuntu系统自带的 茄子 软件&#xff0c;但是视频流很卡&#xff08;非常卡&#xff0c;基本上不能用&#xf…
阅读更多...
springboot2+mybatis-plus+vue3创建入门小项目[学生管理系统]02[实战篇]

springboot2+mybatis-plus+vue3创建入门小项目[学生管理系统]02[实战篇]

01学习篇 创建一个 vue 项目 创建这个新的文件夹 创建前端项目 eggbox 数据库 SQL CREATE DATABASE IF NOT EXISTS egg DEFAULT CHARACTER SET utf8 COLLATE utf8_bin; USE egg;CREATE TABLE stu (id INT AUTO_INCREMENT, -- 自增主键name VARCHAR(64) NOT NULL, -- 非空…
阅读更多...
超级初始网络

超级初始网络

目录 一、网络发展史 1、独立模式 2、局域网 LAN&#xff08;Local Area Network&#xff09; 3、广域网 WAN (Wide Area Network) 二、网络通信基础 1、IP地址&#xff1a;用于定位主机的网络地址 2、端口号&#xff1a;用于定位主机中的进程 3、网络协议 4、五元组 …
阅读更多...
The First项目报告：解读ZK技术的跨链巨头Polyhedra Network

The First项目报告：解读ZK技术的跨链巨头Polyhedra Network

4 月 17 日&#xff0c;零知识证明&#xff08;ZK&#xff09;基础设施开发团队 Polyhedra Network与谷歌云达成战略合作&#xff0c;以响应 Web2 与 Web3 市场对于该技术日益增长的需求。双方将基于Polyhedra的尖端研究及专有算法通过谷歌云提供的零知识即服务向全球开发者开放…
阅读更多...
基于LLM的优化器评测-非凸函数

基于LLM的优化器评测-非凸函数

基于LLM的优化器评测-非凸函数 目标函数测试结果测试代码测试日志 背景: ​ 很多时候我们需要为系统寻找最优的超参.比如模型训练,推理的量化等.本文尝试将LLM当成优化器,帮忙我们寻找最优的超参. 验证方法: 1.设计一个已知最优解的多项式,该多项式有3个变量(因为3个变量可以…
阅读更多...
温故而知新-Spring篇【面试复习】

温故而知新-Spring篇【面试复习】

温故而知新-Spring篇【面试复习】 前言版权推荐温故而知新-Spring篇IOCAOP循环依赖springboot如果要对属性文件中的账号密码加密如何实现&#xff1f;SpringBoot的优点Spring Boot 的核心注解是哪个&#xff1f;它主要由哪几个注解组成的&#xff1f; 最后 前言 2023-7-31 15:…
阅读更多...
MX Component基础使用（多点位读取，多点位写入）

MX Component基础使用（多点位读取，多点位写入）

步骤&#xff0c;先连接PLC&#xff0c;然后在填入对应的点位 D10 然后去读取。 using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Linq;using System.Text;using System.Threading.Tasks;us…
阅读更多...
微信小程序进阶(1)--自定义组件

微信小程序进阶(1)--自定义组件

自定义组件 1.1 什么是自定义组件 开发文档&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 小程序中常常会有些通用的交互模块&#xff0c;比如&#xff1a;下拉选择列表、搜索框、日期选择器等&#xff1b;这些界面交互模块可…
阅读更多...
最新文章

Copyright @ 2022~2023