那些你面试必须知道的webpack知识点

目录

  • 1、webpack介绍和简单使用
    • 1.1 什么是webpack?
    • 1.2 安装webpack
    • 1.3 简单使用一下webpack
  • 2、webpack的入口与输出
    • 2.1 入口(entry)
    • 2.2 输出(output)
  • 3、入口多种配置方法
    • 3.1 多文件打包成一个文件
    • 3.2 多文件打包成多文件
  • 4、loader的概念
  • 5、压缩打包HTML
    • 5.1 使用步骤:
    • 5.2 如何进行多页面打包?
    • 5.3 如何多页面打包,并引入指定的js文件?
  • 6、HTML加入图片
  • 7、HTML加入字体图标
  • 8、单独分离css压缩打包
    • 8.1单独抽离css
    • 8.2压缩css文件

1、webpack介绍和简单使用

1.1 什么是webpack?

webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换(transform)、打包(bundle)。

1.2 安装webpack

1.全局安装:

cnpm install webpack -g
cnpm install webpack-cli -g

也可以通过npm进行全局安装,最好的是使用cnpm,因为cnpm 服务部署在国内阿里云服务器上 , 可以提高包的下载速度 官方也提供了一个全局工具包 cnpm ,操作命令与 npm 大体相同。

我们可以通过 npm 来安装 cnpm 工具

npm install -g cnpm --registry=https://registry.npmmirror.com

在这里插入图片描述

安装webpack:cnpm install webpack -g

在这里插入图片描述
在这里插入图片描述
安装webpack脚手架:cnpm install webpack-cli -g
在这里插入图片描述
2、测试版本
我们来测试一下版本
在这里插入图片描述

1.3 简单使用一下webpack

说明一下:webpack本身之前是打包js的,如果要打包:html、css…需要借助一些东西。

1、进入项目目录,随便创建一个js文件
在这里插入图片描述
2、在该目录中下载webpack

cnpm install webpack -S

在这里插入图片描述
此时该目录下会多出两个文件
在这里插入图片描述
3、在终端执行:webpack进行打包
在这里插入图片描述
它告诉我们index必须在src目录下面。
我们改下文件目录
在这里插入图片描述
再次打包
在这里插入图片描述
此时目录种会多出一个dist文件夹
在这里插入图片描述
在这里插入图片描述
我们打开main.js看看发生了什么变化
在这里插入图片描述
原index.js文件:
在这里插入图片描述
打包后对代码进行了压缩。

2、webpack的入口与输出

2.1 入口(entry)

入口起点(entry point) 指示 webpack 应该使用哪个模块,来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

默认值是 ./src/index.js,但你可以通过在 webpack configuration中配置 entry 属性,来指定一个(或多个)不同的入口起点。例如:
webpack.config.js

module.exports = {entry: './path/to/my/entry/file.js',
};

我们对上面的例子进行改造,将index.js改为script,如果此时直接打包则会报错,因为默认入口是index.js所以我们要改一下入口文件。
在这里插入图片描述
在这里插入图片描述
在webpack.config.js文件中进行改变。
在这里插入图片描述
打包:
在这里插入图片描述

2.2 输出(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundle,以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js,其他生成文件默认放置在 ./dist 文件夹中。

你可以通过在配置中指定一个 output 字段,来配置这些处理过程:

webpack.config.js

const path = require('path');module.exports = {entry: './path/to/my/entry/file.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'my-first-webpack.bundle.js',},
};

我们对上面的例子进行改造,改变出口位置。
在这里插入图片描述

打包:
在这里插入图片描述
文件目录:
在这里插入图片描述
在这里插入图片描述

3、入口多种配置方法

3.1 多文件打包成一个文件

问题:多个入口文件==》单文件出口
解决:将entry改成数组写法,即可。

var path = require('path');
module.exports ={entry:['./src/script.js','./src/a.js','./src/b.js'],output:{path:path.resolve(__dirname, 'dist'),filename:'main.js',}
}

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

3.2 多文件打包成多文件

问题:多个入口文件==》多个文件出口
解决:将entry改成对象写法,key必须为文件名,值为文件路径,并且出口只写一个path即可,不要命名文件。

var path = require('path');
module.exports ={entry:{script:'./src/script.js',a:'./src/a.js',b:'./src/b.js'},output:{path:path.resolve(__dirname, 'dist'),}
}

4、loader的概念

webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中。
简单来说:就是webpack默认只能打包js和json文件,如果想打包html、css、图片等等类型的文件…就需要用到对应的loader。

Warning:

webpack 的其中一个强大的特性就是能通过 import 导入任何类型的模块(例如 .css 文件),其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是很有必要的,因为这可以使开发人员创建出更准确的依赖关系图。
在更高层面,在 webpack 的配置中,loader 有两个属性:

1、test 属性,识别出哪些文件会被转换。
2、use 属性,定义出在进行转换时,应该使用哪个 loader。
webpack.config.js

const path = require('path');module.exports = {output: {filename: 'my-first-webpack.bundle.js',},module: {rules: [{ test: /\.txt$/, use: 'raw-loader' }],},
};

在这里插入图片描述
我们对之前的例子进行改造,添加一个css样式,然后打包。
在这里插入图片描述
引入样式
在这里插入图片描述
css
在这里插入图片描述

var path = require("path");
module.exports = {entry: "./src/a.js",output: {path: path.resolve(__dirname, "dist"),filename: "main.js",},module: {rules: [{test: /\.css$/, //匹配任何以.css结尾的文件use: ["style-loader", "css-loader"],//打包css需要的loader},],},
};

在打包前先安装这两个loader
在这里插入图片描述
进行打包:
在这里插入图片描述
打包后的main.js文件:
在这里插入图片描述
我们创建一个index.html文件引入打包后的main.js,看看js和css样式是否生效:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body>
<script src="./dist/main.js"></script>    
</body>
</html>

生效,说明打包没有问题。
在这里插入图片描述
题外话:

一般来说一个项目有特别多的loader,如果让我们一个一个下载,岂不是要疯了,所以一些框架,比如vue、react…等都是自动下载对应的loader,还有webpack的配置它也会自动生成,我们学习webpack主要是为了能够看到那些代码,并在项目需要时,更改一些配置。
不过大佬一般都能够自己配置webpack,哈哈哈哈。

5、压缩打包HTML

webpack默认只打包javascript文件和json文件,但是我们项目不可能只打包js文件,必然还要打包html文件。
想要打包html文件,那就必须用到一个插件html-webpack-plugin

5.1 使用步骤:

1、下载

cnpm install html-webpack-plugin

在这里插入图片描述
2、引入

var HtmlWebpackPlugin = require('html-webpack-plugin')

3、配置

var path = require("path");
var HtmlWebpackPlugin = require('html-webpack-plugin') //引入
module.exports = {entry: "./src/index.js",output: {path: path.resolve(__dirname, "dist"),filename: "main.js",},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},],},plugins: [new HtmlWebpackPlugin()],//添加配置
};

在这里插入图片描述
预格式化一下,方便阅读。
在这里插入图片描述
源文件:
在这里插入图片描述
你会发现打包后,title和div消失了,这是有问题的。

主要是需要对 plugins: [new HtmlWebpackPlugin()],添加template配置项。

var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {entry: "./src/index.js",output: {path: path.resolve(__dirname, "dist"),filename: "main.js",},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},],},plugins: [new HtmlWebpackPlugin({// 指定模板页面template: "./src/index.html",}),],
};

查重新打包后:
在这里插入图片描述

我们也可以添加新的配置项filename,改变默认输出文件名称。

var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {entry: "./src/index.js",output: {path: path.resolve(__dirname, "dist"),filename: "main.js",},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},],},plugins: [new HtmlWebpackPlugin({// 指定模板页面template: "./src/index.html",// 改变默认输出文件名称filename: "hhh.html",}),],
};

在这里插入图片描述

5.2 如何进行多页面打包?

创建多个new HtmlWebpackPlugin

var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {entry: "./src/index.js",output: {path: path.resolve(__dirname, "dist"),filename: "main.js",},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},],},plugins: [new HtmlWebpackPlugin({// 指定模板页面template: "./src/index.html",// 改变默认输出文件名称filename: "index.html",}),new HtmlWebpackPlugin({// 指定模板页面template: "./src/hhh.html",// 改变默认输出文件名称filename: "hhh.html",}),],
};

打包多个页面,必须设置filename配置项,配置项的值必须不同。

打包后:

在这里插入图片描述

5.3 如何多页面打包,并引入指定的js文件?

比如我们有这样一个需求:
有三个js文件,分别是index.js、jquery.js、hhh.js
我需要让index.html压缩打包引入jquery.js、index.js,hhh.html压缩打包引入jquery.js、hhh.js

此时我们就需要用到这两个配置项:
chunks:允许插入到模板中的一些chunk,不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时,每个页面注入的thunk应该是不相同的,需要通过该配置为不同页面注入不同的thunk;

excludeChunks: 这个与chunks配置项正好相反,用来配置不允许注入的thunk。

1、改变entry入口配置
2、将output出口的filename删除
3、设置excludeChunks不允许注入哪些文件
注:前两条为什么这样设置,前文已经说过,若忘了,可往上翻阅文档。

var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {entry: {index: "./src/index.js",jquery: "./src/jquery.js",hhh: "./src/hhh.js",},output: {path: path.resolve(__dirname, "dist"),},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},],},plugins: [new HtmlWebpackPlugin({// 指定模板页面template: "./src/index.html",// 改变默认输出文件名称filename: "index.html",excludeChunks: ["hhh"], //不允许注入hhh.js文件}),new HtmlWebpackPlugin({// 指定模板页面template: "./src/hhh.html",// 改变默认输出文件名称filename: "hhh.html",excludeChunks: ["index"], //不允许注入index.js文件}),],
};

打包后(已预格式化)方便阅读代码:
在这里插入图片描述
在这里插入图片描述
详细htm-webpack-plugin文档,可观看博客园的一个博主写的文章:
https://www.cnblogs.com/wonyun/p/6030090.html

6、HTML加入图片

在index.html文件中插入图片,如果不配置对应的图片loader,则无法将图片打包。
原文件:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
进行打包:在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
图片没有被打包。

解决:
一、下载加载图片的loader >file-loader
在这里插入图片描述
二、下载让html支持图片的loader
>html-withimg-loader
在这里插入图片描述
三、配置:在module对象中的rules数组中添加两个配置。

var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {entry: {index: "./src/index.js",jquery: "./src/jquery.js",hhh: "./src/hhh.js",},output: {path: path.resolve(__dirname, "dist"),},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},{test: /\.(png|jpg|jpeg|gif)$/,use: [{loader: "file-loader",options: {esModule: false,outputPath: "img/", //让图片打包到img目录下,不配置该项默认是将图片和其他文件打包到同级},},],},{test: /\.html$/,use: "html-withimg-loader",},],},plugins: [new HtmlWebpackPlugin({// 指定模板页面template: "./src/index.html",// 改变默认输出文件名称filename: "index.html",excludeChunks: ["hhh"], //不允许注入hhh.js文件}),new HtmlWebpackPlugin({// 指定模板页面template: "./src/hhh.html",// 改变默认输出文件名称filename: "hhh.html",excludeChunks: ["index"], //不允许注入index.js文件}),],
};

打包后:
在这里插入图片描述

7、HTML加入字体图标

在项目中必不可少的都要使用字体图标,对于字体图标,我们也要配置相对应的loader,不然无法打包字体图标。

我们在项目中添加字体图标:
在这里插入图片描述
css里放置,字体图标的样式,fonts放置字体图标文件
在这里插入图片描述
在这里插入图片描述
iconfont.css要改变一下引入路径:
在这里插入图片描述
如需打包,不能在index,html页面进行引入,需要在index,js文件中引入。
在这里插入图片描述
我们不配置对于loader进行打包,看看效果:
在这里插入图片描述
没有打包字体图标

解决:

 {test:/\.(ttf|woff|woff2)$/,use:'file-loader?name=./fonts/[name].[ext]'//打包到指定文件夹,name为统一iconfont,ext为每个文件自己的后缀名}

全代码:

var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {entry: {index: "./src/index.js",jquery: "./src/jquery.js",hhh: "./src/hhh.js",},output: {path: path.resolve(__dirname, "dist"),},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},{test: /\.(png|jpg|jpeg|gif)$/,use: [{loader: "file-loader",options: {esModule: false,outputPath: "img/", //让图片打包到img目录下,不配置该项默认是将图片和其他文件打包到同级},},],},{test: /\.html$/,use: "html-withimg-loader",},{test:/\.(ttf|woff|woff2)$/,use:'file-loader?name=./fonts/[name].[ext]'//打包到指定文件夹,name为统一iconfont,ext为每个文件自己的后缀名}],},plugins: [new HtmlWebpackPlugin({// 指定模板页面template: "./src/index.html",// 改变默认输出文件名称filename: "index.html",excludeChunks: ["hhh"], //不允许注入hhh.js文件}),new HtmlWebpackPlugin({// 指定模板页面template: "./src/hhh.html",// 改变默认输出文件名称filename: "hhh.html",excludeChunks: ["index"], //不允许注入index.js文件}),],
};

打包后:
在这里插入图片描述

8、单独分离css压缩打包

在之前我们的css都是更js打包在一起,但是我们想要它单独分离出来并进行压缩打包该怎么做呢?

8.1单独抽离css

1.下载插件:mini-css-extract-plugin
2.引入插件

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

3.修改loader

 {test: /\.css$/,use: [MiniCssExtractPlugin.loader, "css-loader"],},

4.使用插件:

plugins:[// 分离cssnew MiniCssExtractPlugin(),
]

8.2压缩css文件

1.下载插件:optimize-css-assets-webpack-plugin
2.引入插件:

var OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");

3、使用插件:

plugins:[// 压缩cssnew OptimizeCssAssetsWebpackPlugin()
]

打包后:多出一个index.css文件
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用 pytorch 训练端对端验证码识别神经网络并进行 C++ 移植

文章目录 前言安装安装 pytorch安装 libtorch安装 opencv&#xff08;C&#xff09; 准备数据集获取训练数据下载标定 编码预分析 数据集封装格式 神经网络搭建神经网络训练神经网络测试神经网络预测C 移植模型转换通过跟踪转换为 Torch Script通过注解转换为 Torch Script 编写…

【工具】SecureCR-8.5下载、安装激活和使用教程

起初我参考的文章&#xff1a;【工具】SecureCR-8.5下载、安装激活和使用教程&#xff08;包含常用设置&#xff09;_securecrt激活_SecureCode的博客-CSDN博客 但是不行啊&#xff0c;执行到13步的时候报错&#xff1a; 问了作者也没有回应&#xff0c;直到我参考了&#xff…

神经网络的发展历史

神经网络的发展历史可以追溯到上世纪的数学理论和生物学研究。以下是神经网络发展史的详细概述&#xff1a; 1. 早期的神经元模型&#xff1a; 1943年&#xff0c;Warren McCulloch和Walter Pitts提出了一种神经元模型&#xff0c;被称为MCP神经元模型&#xff0c;它模拟了生…

车载视频如何转换视频格式

当你收集了多种视频想在车内进行播放&#xff0c;它们可能不会自动播放。你有可能会在屏幕上看到一条消息&#xff0c;显示“文件格式不受支持”&#xff0c;这是因为这些视频可能采用了你的汽车无法识别的格式。 那我们如何才可以转换为车载播放器上运行的最重要且最广泛使用…

Yakit工具篇:专项漏洞检测的配置和使用

简介&#xff08;来自官方文档&#xff09; 专项漏洞检测是针对特定应用程序或系统进行的安全漏洞扫描技术&#xff0c;旨在检测与该应用程序或系统相关的安全漏洞。 Yakit通过对常见的中间件、CMS、框架、组件进行总结、归纳&#xff0c;并针对这些组件对其常见的高危漏洞进…

IP协议(上)

目录 一、初步认识IP协议 二、认识IP地址 三、协议报头格式 1.报头和有效载荷分离 2.20字节的固定数据 四、网段划分 1.一个小例子 2.认识IP地址的划分 3.数据的传输过程 4.特殊的IP地址 5.通信运营商 &#xff08;1&#xff09;通信运营商的作用 &#xff08;2&a…

Spring Security认证架构介绍

在之前的Spring Security&#xff1a;总体架构中&#xff0c;我们讲到Spring Security整个架构是通过Bean容器和Servlet容器对过滤器的支持来实现的。我们将从过滤器出发介绍Spring Security的Servlet类型的认证架构。 1.AbstractAuthenticationProcessingFilter AbstractAut…

Day6力扣打卡

打卡记录 统计无向图中无法互相到达点对数&#xff08;并查集 / DFS&#xff09; 链接 并查集 思路&#xff1a;用并查集将连通区域的连在一起&#xff0c;再遍历所有点&#xff0c;用hash表存储不同连通块的元素个数&#xff0c;然后 乘积和 便是答案。 注意&#xff1a; /…

计算机视觉基础(5)——特征点及其描述子

前言 本文我们将学习到特征点及其描述子。在特征点检测中&#xff0c;我们将学习角点检测和SIFT关键点检测器&#xff0c;角点检测以哈里斯角点检测器为例进行说明&#xff0c;SIFT将从高斯拉普拉斯算子和高斯差分算子展开。在描述子部分&#xff0c;我们将分别学习SIFT描述子和…

水库大坝安全监测方案,筑牢水库安全防线!

方案背景 党的十九届五中全会提出&#xff1a;“统筹发展和安全、加快病险水库除险加固”&#xff1b;国务院常务会议明确“十四五”期间&#xff0c;水库除险加固和运行管护要消除存量隐患&#xff0c;实现常态化管理&#xff1b;到2025年前&#xff0c;完成新出现病险水库的…

UVM-什么是UVM方法学

概念简介 百度对UVM的解释如下&#xff1a; 通用验证方法学&#xff08;Universal Verification Methodology, UVM&#xff09;是一个以SystemVerilog类库为主体的验证平台开发框架&#xff0c;验证工程师可以利用其可重用组件构建具有标准化层次结构和接口的功能验证环境 UVM…

我国跨境电商行业研究报告(2022)

我国跨境电商行业研究报告 我国跨境电商规模突飞猛进&#xff0c;2022年进出口规模超2万亿元&#xff0c;2023年上半年跨境电商出口8210亿元&#xff0c;增长19.9%。全国跨境电商主体已超10万家&#xff0c;近年来涌现出一批上市公司&#xff0c;以及广州希音等全球独角兽企业。…

【了解一下,Elastic Search的检索】

文章目录 **1.1.ES**1.1.1.elasticsearch的作用**1.1.2.ELK栈****2.索引库操作****2.1.mapping映射属性****2.2.索引库的CRUD** **3. 文档操作** **基于IDEA操作ES****索引操作****文档操作** DSL查询文档**1.1.DSL查询分类****1.2. 全文检索查询****1.3. 精准查询****1.4. 地理…

淘宝商品详情API接口(标题|主图|SKU|价格|销量|库存..)

一、应用场景 淘宝商品详情接口的应用场景非常广泛&#xff0c;以下是其中几个例子&#xff1a; 商家用于展示商品信息&#xff1a;淘宝详情接口可以被用于商家的自主店铺或第三方电商平台上&#xff0c;方便展示商品详细信息。 商品价格比对&#xff1a;淘宝详情接口可以用于…

2.4 如何在FlinkSQL使用DataGen(数据生成器)

1、DataGen SQL 连接器 FLinkSQL中可以使用内置的DataGen SQL 连接器来生成测试数据 官网链接&#xff1a;DataGen SQL 连接器 2、随机数数据生成器 随机数数据生成器支持随机生成 char、varchar、binary、varbinary、string 类型的数据 它是一个无界流的数据生成器 -- TO…

VSCode使用记录

一、安装 从官网 https://code.visualstudio.com 下载相应安装包 二、扩展&#xff1a;商店 Chinese (Simplified) (简体中文) Language Pack for Visual Studio CodeLive Serveropen in browserGitLens — Git superchargedRemote - SSHPrettier - Code formatterESLintpxt…

10个最流行的土木工程BIM软件

建筑信息模型 (BIM) 是一种数字化流程&#xff0c;最近在土木工程领域受到广泛关注。 它是一种设计、构建和管理项目的协作方法。 它涉及创建和使用建筑物的详细数字表示&#xff0c;包括 3D 模型、数据和有关项目的信息。 BIM 在参与项目的不同利益相关者之间提供实时协作&…

H5随机短视频滑动版带打赏源码,可封装APP软件或嵌入式观看

H5随机短视频滑动版带打赏源码&#xff0c;可封装APP软件或嵌入式观看&#xff0c;网站引流必备源码&#xff01; 数据来源抖音和快手官方短视频链接&#xff0c;无任何违规内容&#xff01;可自行添加广告等等&#xff01; 手机端完美支持滑动屏幕观看&#xff08;向上或向右…

UVM 验证方法学之interface学习系列文章(八)《interface不小心引入X态问题》

前面的文章学习,想必大家都对interface 有了深入了解。大家可不要骄傲哦,俗话说:小心驶得万年船。今天,再给大家介绍一个工作中,不是经常遇到,但是一旦遇到,会让你纠结很久的事情。 前面文章提到,随着验证复杂度的不断增加,interface 的bind 的操作,是必不可少的用法…

Git Bash(一)Windows下安装及使用

目录 一、简介1.1 什么是Git&#xff1f;1.2 Git 的主要特点1.3 什么是 Git Bash&#xff1f; 二、下载三、安装3.1 同意协议3.2 选择安装位置3.3 其他配置&#xff08;【Next】 即可&#xff09;3.4 安装完毕3.5 打开 Git Bash 官网地址&#xff1a; https://www.git-scm.com/…