webpack 官方文档解读一(详细使用教程) 起步

news2025/1/15 20:42:41

什么是webpack

就是个打包工具。通过一系列插件帮你优化项目,压缩,混淆等。总之什么脏活累活都能干。

入门案例

创建一个目录,并安装webpack和webpack-cli这两个包。webpack包是webpack本体,webpack-cli是他提供的工具包。

mkdir webpack-demo
cd webpack-demo
npm init -y
npm i webpack webpack-cli

两个包加起来安装了117个依赖包,还是非常复杂的。

added 117 packages in 10s

在这里插入图片描述

下面是部分包内容。
在这里插入图片描述

传统运行html和js方式

手动创建index.html,src目录,index.js,都是空的。
在这里插入图片描述
index.js:
写了一个方法,并在html加载的时候执行这段代码。_.join()是js库lodash的一个方法。lodash这个库提供了非常多实用的js封装,例如数组,字符串增强等功能。

function component() {
  const element = document.createElement('div');

  // lodash(目前通过一个 script 引入)对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html:
引入lodash库。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>起步</title>
    <script src="https://unpkg.com/lodash@4.17.20"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

在浏览器打开index.html.可以看到下面的结果。这是我们正常写html和js的过程。
在这里插入图片描述

//这一步是无关紧要的,可以不做。
配置package.json:删除 “main”: "index.js"这行。 private为true,项目是不能发布的,为了防止误发布。

 {
   "name": "webpack-demo",
   "version": "1.0.0",
   "description": "",
   //删除这行.......................
  "main": "index.js",
  //添加这行
  "private": true,
  //..........................
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "devDependencies": {
     "webpack": "^5.38.1",
     "webpack-cli": "^4.7.2"
   }
 }

传统方式存在的问题

传统方式不是很正常吗?有什么问题?在开发中,我们会引入非常多的js文件和css文件,一个页面可能有几十个这样的小文件。每个文件都是要向服务器发生请求的。这对于服务器来说是非常大的负担。

那么怎么解决呢?当然是用webpack。webpack能帮我们把多个js文件合成一个或者几个js文件,css也是一样。至于会不会重名这些问题不需要担心,webpack已经帮我们处理好了。不光如此,webpack还会把不必要的空格,注释等东西删除减少体积。

用webpack处理js

我们在前面的index.js的开头添加下面这一句。
通过import语法导入lodash的变量。写了这行后,webpack会自动帮我们加载lodash,也就不需要我们手动引入了。

import _ from "lodash"

原来的导入lodash的script也就没有用了,可以直接删掉。引入src/index.js也没有用了,webpack默认就会执行src/index.js。
甚至,整个index.html都没有用了,可以删除。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>起步</title>
    <!-- <script src="https://unpkg.com/lodash@4.17.20"></script> -->
</head>
<body>
    <!-- <script src="./src/index.js"></script> -->
</body>
</html>

然后我们手动创建一个dist目录和dist/index.html文件
在这里插入图片描述
dist/index.html的内容如下:
就是引入了一个main.js。这个main.js待会会由webpack帮我们自动生成,现在提前引入。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>起步</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>

执行webpack进行打包。

npx webpack

可以看到在dist目录下面确实生成了一个main.js
在这里插入图片描述

里面是一堆很难看懂的代码,这个代码就是经过webpack打包后的代码。
运行dist/index.html可以看到下面的结果。
在这里插入图片描述

webpack的配置文件

创建一个webpack.config.js文件,位置可以随便,名字也可以随便,不过一般都按下图的位置放置,也默认叫这个名字。
在这里插入图片描述
需要用到node的path库。默认的配置,和我们上面没写配置的是一样的。

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

通过下面的命令按照配置运行webpack。

npx webpack --config webpack.config.js

运行的结果和前面是一样的。更多的配置后面再说。
实际上,下面这段可以不写,默认会读取根目录下的webpack.config.js。

--config webpack.config.js

package.json配置快速运行webpack

在package.json的scripts节点添加一个build的脚本。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  }

现在可以通过下面的命令快速的运行webpack了。
当操作很复杂的时候,下面的命令就非常有用了。

npm run build

如果你用过vue,vue的package.json也有类似这样的配置。只是他调用的是vue-cli-service。实际上vue-cli-service底层调用的就是webpack来进行打包的,当然还做了很多别的事情,如果你查看vue-cli-service的包,会发现里面也有webpack.config.js这个文件。vue-cli-service这个包里面的内容还是非常复杂的。我们只需要知道Vue底层也是用webpack打包的就行了。

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }

在这里插入图片描述

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

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

相关文章

RTL8380M/RTL8382M管理型交换机系统软件操作指南二:转发表

前面介绍了端口配置,这次对转发表进行详细的描述&#xff0c;主要包括以下三方面内容&#xff1a;基础配置、转发表、删除1.1 基础配置 1.1.1 老化时间 老化时间是一个影响交换机学习进程的参数。从一个地址记录加入地址表以后开始计时&#xff0c;如果在老化时间内各端口未收…

ResNet网络详解

ResNet ResNet在2015年由微软实验室提出&#xff0c;斩获当年lmageNet竞赛中分类任务第一名&#xff0c;目标检测第一名。获得coco数据集中目标检测第一名&#xff0c;图像分割第一名。 ResNet亮点 1.超深的网络结构(突破1000层) 2.提出residual模块 3.使用Batch Normalizat…

java项目-第147期ssm社区生活超市管理系统_(spring+springmvc+mybatis+jsp)_java毕业设计_计算机毕业设计

java项目-第147期ssm社区生活超市管理系统_(springspringmvcmybatisjsp)_java毕业设计_计算机毕业设计 【源码请到资源专栏下载】 今天分享的项目是《ssm社区生活超市管理系统》 该项目分为3个角色&#xff0c;管理员、用户、供应商角色。 用户可以浏览前台商品&#xff0c;进行…

[附源码]java毕业设计软件项目过程管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

牛客小白月赛 61 E 排队

题目大意&#xff1a; n个数&#xff0c;共有n&#xff01;种排列方式&#xff0c;记Pi(a)表示序列a的第i种排队方式&#xff0c;cnt(Pi(a))表示P(i)的逆序对个数&#xff0c;PLMM想知道这n&#xff01;种排列方式共有多少对逆序对 给定一个 nnn 个数&#xff0c;在所有排列顺序…

Windows 11 Insider Preview Build 25247.1000(rs_prerelease)更新内容

微软于今日推出了新的Dev预览版25247.1000&#xff0c;引入了电源设置的新能源建议&#xff0c;“帐户”页面现在会在 OneDrive 存储空间不足时显示警告。下面就和小编一起来看看详细的更新内容吧。 更新内容 此版本包括一些新功能&#xff0c;包括能源建议、任务管理器的一些改…

MySQL8.0优化 - 锁 - 从数据操作的类型划分:读锁、写锁

文章目录学习资料锁的不同角度分类锁的分类图如下从数据操作的类型划分&#xff1a;读锁、写锁读锁写锁锁定读MySQL8.0新特性写操作学习资料 【MySQL数据库教程天花板&#xff0c;mysql安装到mysql高级&#xff0c;强&#xff01;硬&#xff01;-哔哩哔哩】 【阿里巴巴Java开…

【21-业务开发-基础业务-商品模块-分类管理-商品系统三级分类的新增类别前后端代码实现-商品系统三级分类的更新类别前后端代码实现-之前错误的Bug修正】

一.知识回顾 【0.三高商城系统的专题专栏都帮你整理好了&#xff0c;请点击这里&#xff01;】 【1-系统架构演进过程】 【2-微服务系统架构需求】 【3-高性能、高并发、高可用的三高商城系统项目介绍】 【4-Linux云服务器上安装Docker】 【5-Docker安装部署MySQL和Redis服务】…

2022 全网最全最新 Java 面试题 - 独家内部教材

怎样才能拿到大厂的 offer&#xff0c;没有掌握绝对的技术&#xff0c;那么就要不断的学习 从疫情破局而出&#xff0c;又在毕业季一路过关斩将&#xff0c;我是如何笑面试官&#xff0c;拿到阿里&#xff0c;腾讯等八家大厂的 offer 的呢&#xff0c;在这里分享我的秘密武器&…

kubernetes(K8S)学习笔记P3:集群 YAML 文件(部署)

集群 YAML 文件&#xff08;部署&#xff09;4.集群 YAML 文件&#xff08;部署&#xff09;4.1 YAML 文件概述4.2YAML 文件书写格式4.2.1YAML 介绍4.2.2YAML 基本语法4.2.3YAML 支持的数据结构4.3资源清单描述方法4.3.1常用字段4.3.2字段解释4.4快速编写yml-->kubdectl cre…

数据结构由中序序列和后序序列构造二叉树

2022.11.19 由中序序列和后序序列构造二叉树任务描述相关知识编程要求测试说明C/C代码任务描述 本关任务要求采用中序遍历序列和后序遍历序列构造二叉树。 相关知识 给定一棵二叉树的中序遍历序列和后序遍历序列可以构造出这棵二叉树。例如后序序列是DEBFGCA&#xff0c;中序…

MySQL8.0优化 - 锁 - 从对待锁的态度划分:乐观锁、悲观锁

文章目录学习资料锁的不同角度分类锁的分类图如下从对待锁的态度划分&#xff1a;乐观锁、悲观锁悲观锁&#xff08;Pessimistic Locking&#xff09;乐观锁&#xff08;Optimistic Locking&#xff09;两种锁的适用场景学习资料 【MySQL数据库教程天花板&#xff0c;mysql安装…

Ajax笔记

Ajax笔记资源的请求方式一、概念1、Ajax作用2、jQuery中的Ajax二、$.get()函数的语法$.get()发起不带参数的请求$.get()发起带参数的请求三、$.post()函数的语法$.post()向服务器提交数据<font colorred>四、$.ajax()函数的语法使用$.ajax()发起GET请求使用$.ajax()发起P…

JSP使用

目录 简介 作用 创建 结构 常用脚本 声名脚本 表达式脚本 代码脚本 注释 九大内置对象 四大域对象 out与response.getWriter 静态引入 动态引入 EL表达式 作用 语法 取值顺序 获取指定参数 输出指定对象的数据 运算符 算数运算符 关系比较 逻辑运算符…

【Vue】使用 axios 发送ajax 请求

在 Vue 里面我们如何去发送一些 Ajax(阿贾克斯)请求 从远程的网站上获取一些数据。 假如我们有这样的接口的地址&#xff1a; https://www.xxxx.site 假设它是一个能跨域访问的接口。‍‍‍‍ 如果我们想去在我们的代码里面发这种请求&#xff0c;我该怎么做&#xff1f; 首…

Ubuntu 桌面系统升级

本文介绍 Ubuntu 桌面系统升级的两种方式&#xff0c;通过 UI 或命令行的方式&#xff0c;演示为 20.04 升级为 22.04。并介绍了 windows 的 Linux 子系统 wsl 的升级注意事项。 背景 之前在学习 ROS2 时&#xff0c;安装 ros-humble-desktop 出现依赖错误&#xff1a;无法修正…

[附源码]java毕业设计食材采购平台论文

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

AI智工作室11.19练习题解

F CodeForces - 710A 训练1(共12题) - Virtual Judge 我的代码 #include<iostream> using namespace std; int main() {char arr[10][10],a;int b,c,k0;cin>>a>>c; ba-a1; // cout<<b<<" "<<c<<endl; for(int i0;i<9…

使用VSCode编辑与编译WSL2下源代码

1. 安装WSL2 2. windows下安装VSCode 3. VSCode安装插件Remote Development 北京时间2019年5月3日&#xff0c;在 PyCon 2019 大会上&#xff0c;微软发布了 VS Code Remote&#xff0c;开启了远程开发的新时代&#xff01;这次发布包含了三款核心的全新插件&#xff0c;它们…

Java文件操作【教你用Java运行微信】

文章目录01 创建文件02 获取文件信息03 目录操作和文件删除04 运行可执行文件01 创建文件 new File(String pathname) //根据路径创建一个File对象&#xff1b;new File(File parent,String child) //根据父目录文件子路径创建&#xff1b;new File(String parent,String chil…