webpack详细教程

1，什么是webpackwebpack | webpack中文文档 | webpack中文网

  • Webpack 不仅是一个模块打包器(bundler)，更完整的讲是一个前端自动化构建工具。
  • 在 Webpack 看来前端的所有资源文件(s/json/css/img/less/...)都会作为横块处理
  • 它将根据模块的依赖关系进行静态分析，生成对应的静态资源.

五个核心概念 

  • Entry:入起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
  • Output:output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件
  • Loader: loader让webpack 能够去处理那些非JavaScript 文件
  • Plugins: 插件则可以用于执行范围更广的任务。例:打包优化、压缩
  • Mode:横式，有生产模式 production 和开发模式development

理解Loader

  • Webpack 本身只能加载JS/JSON 块，如果要加载其他类型的文件(模块)，就需要使用对应的loader进行转换/加载。
  • Loader 本身也是运行在 node.js 环境中的JavaScript 横块。
  • 本身是一个函数，接受源文件作为参数，返回转换的结果。
  •  loader 一般以xxx-loader 的方式命名，xxx代表了这个 loader 要做的转换功能，比如 less-loader。

理解Pligins

  • 插件可以完成一些loader 不能完成的功能。
  • 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。

Mode

  • 模式(Mode)指示 webpack 使用相应模式的配置

配置文件(默认)

  •  webpack.configjs:是一个 node 模块，返回一个json 格式的配置信息对象

 2，安装webpack

  • 全局安装（这一步暂时不需要做）
npm install webpack webpack-cli -g
  • 局部安装
npm init
npm install webpack webpack-cli -D   # cli  Command Line Interface 命令行接口

官方推荐使用『局部安装』，这样可以避免因为版本不同而产生的 BUG

3，webpack初体验 

 1.创建JS模块: src/index.js

import data from './data.json'console.log(data)function add(x,y){return x + y;
}console.log(add(1,2))

2,创建JSON模块: src/data.json

{"name":"jack","age":18
}

3,创建css文件: src/index.css

html,body{height: 100%;background-color: pink;
}

4,安装

npm init -y
npm i webpack webpack-cli -D

5，执行打包命令 『项目根目录下运行』

# 开发模式打包
npx webpack --entry ./src/index.js  --output-path ./build/js --output-filename bundle.js --mode developmentwebapck会以 ./src/index.js为入口文件开始打包，打包后输出到 ./build/bundle.js整体打包环境，是开发环境# 生产模式打包
npx webpack --entry ./src/index.js  --output-path ./build/js --output-filename bundle2.js --mode productionwebapck会以 ./src/index.js为入口文件开始打包，打包后输出到 ./build/bundle.js整体打包环境，是生产环境（对代码进行压缩到只剩下一行代码，在开发项目中对代码进行一个打包，解析速度等会变快）
  • –entry 设置入口
  • –output-path 设置输出目录
  • –output-filename 设置输出文件名
  • –mode 设置运行模式

区别 npm 与 npx ?

它们都是由Node提供的2个工具, 用来做工具包的相关处理
npm (Node Package Manager) : 包管理器, 用来下载工具包
npx (Node Package Excuted) : 包扩展工具, 用来运行工具包命令
npx 查找工具包的顺序: 局部查找 ==> 全局查找 ==> 运行

但是当在index.js中引入css样式，会进行一个报错

import "./index.css"

所以我们得到一个结论：

1.webpack能处理js/json资源，不能处理css/img等资源

2.生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化~

3.生产环境比开发环境多一个压缩js代码

4，使用配置文件打包

问题：打包命令太复杂(需要指定打包的各种配置信息)

解决：通过JS类型的配置文件来指定打包的配置信息

项目根目录下创建文件 webpack.config.js，内容如下

const {resolve} = require('path'); // path模块是Node内置的
// __dirname：当前配置文件所在的目录绝对路径
// resolve: 用来拼接路径的函数// 暴露配置对象
module.exports = {// 入口entry: './src/index.js',// 出口output: {path: resolve(__dirname, 'build'), // 打包文件所在的根目录filename: 'js/bundle.js', // 打包生成的js文件名(可以带目录)clean: true, // 打包时, 会先自动清空打包文件夹},// 模式// mode: 'production',mode: 'development',
}

 创建完毕之后，在项目根目录执行如下命令：

npx webpack

5，打包样式

切记，以下内容需要在配置文件打包的基础上进行添加，直接使用会报错

问题：webpack本身只能打包 JS 文件和 JSON 文件, 不能打包CSS文件

解决：利用css-loader & style-loader & less-loader 对CSS进行打包处理

首先是我们的准备工作

1,创建css文件：./src/index.css

html,body{margin: 0;padding: 0;height: 100%;background-color: pink;
}

2,创建less文件：./src/index.less

#title{color: #fff;
}

3.在入口JS文件中引入这些资源：./src/index.js

// 引入样式资源
import './index.css'  //只下载css-loader就只引入css文件 不然会报错
import './index.less' //只下载less-loader就只引入less文件 不然会报错

5-1：打包css文件

第一步：安装loader

npm i style-loader css-loader -D

第二步：修改webpack.config.js配置文件

module.exports = {mode: 'development',// 配置 loadermodule: {rules: [// 配置 css 文件处理{test: /\.css$/, // 处理css文件use: ["style-loader",		// 将 CSS 生成 style 标签插入 HTML 中"css-loader"  		// 将 CSS 转为 CommonJS 的模块]}   ]},
}

第三步：运行打包命令 『在项目的根目录下运行』

npx webpack

 5-2：打包less文件

第一步：安装loader

npm i less less-loader -D

第二步：配置loader

module.exports = {module: {rules: [// 配置 less 文件处理{test: /\.less$/, // 处理less文件use: ['style-loader', // 将 CSS 生成 style 标签插入 HTML 中'css-loader', // 将 CSS 转为 CommonJS 的模块'less-loader' // 将Less编译为CSS]},]}
}

第三步：运行打包命令 『在项目的根目录下运行』

npx webpack

6，打包HTML资源

问题： 在HTML中手动引入打包文件比较麻烦，且没有压缩处理

解决： 使用html-webpack-plugin打包HTML => 自动引入打包文件，压缩HTML

  1. 删除HTML中引入的JS打包文件

  2. 安装插件

npm i html-webpack-plugin -D

     3.修改 webpack.config.js 配置文件

// 1. 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {plugins: [// 2. 配置打包HTML的插件new HtmlWebpackPlugin({template: "./public/index.html",// 指定html模板文件。inject: "body",// 将打包生成的JS文件放置在body尾部hash: true,// 在引入JS时增加hash后缀字符串,去除缓存。filename:'index.html'minify: {removeAttributeQuotes: true,// 移除属性中的双引号removeComments: true,// 移除注释collapseWhitespace: true,// 去除空格与换行}})]
}

       4.执行打包命令

npx webpack  # 打包产生的页面自动引入js打包文件

        5.静态资源要相对根目录查找，需要增加一个配置

output: {// 3-1. 指定出口文件的目录path: path.resolve(__dirname, '../dist'),// 3-2. 指定打包后的js文件名filename: 'js/app.bundle.js',// 3-3. 重新打包，清空以前的内容，重新生成clean: true,// 3-4. 静态资源目录publicPath:'/'},

5-1. 如何查看打包后的效果

  • 方式一：在vscode中，以dist为根目录代开项目。这样liveserver 模拟的服务器 5500端口的根目录就是dist目录
  • 方式二：
    • 安装一个 serve 包，用它来模拟服务器，它可以指定根目录启动服务
    • npm i -g serve
    • 指定目录启动：
    • serve 网站根目录名
    • 举例：serve dist
  • 根目概念：
    • 项目根目路：指的是src所在目录
    • 网站根目录：build之后的目录。当我们通过网址访问的时候，去哪个目录查找资源

7，打包图片资源

7-1. 打包 CSS和JS 中的图片

问题： 在CSS或JS中我们都有可能引入图片, 如何打包这些图片文件呢?

解决： 我们可以用内置的资源加载器来处理

参考文档：https://webpack.docschina.org/guides/asset-modules/

1，在CSS中引入图片

<div class="react"></div>
<div class="vue"></div>

拷贝图片react.png vue.png到src/img文件夹下

.react {width: 200px;height: 200px;float: left;margin-right: 20px;background: url('../images/react.png');background-size: cover;
}
.vue {width: 200px;height: 200px;float: left;background: url('../images/vue.png');background-size: cover;
}

2,修改 webpack.config.js 

module.exports = {mode: 'development',module: {rules: [// 处理图片{test: /\.(jpg|png|gif)$/,type: "asset",// 解析器parser: {// 指定进行图片base64编码最大文件大小dataUrlCondition: {maxSize: 5 * 1024, // 5kb    默认8k}},// 打包生成的文件generator: {filename: 'images/[hash:8][ext]',},},]}
}

3,重新打包

npx webpack

图片base64编码：对要引入的小图片转换为特定字符串，显示时还是为原图片

好处：减少HTTP请求，加快图片显示

限制：只合适小图片，如果是大图也做base64处理，会导致css/html文件过大，不利用页面显示

 7-2. 打包 HTML 中的图片

问题：内置的资源打包器不能打包处理html中 引入的图片

解决：利用html-loader打包html中引入的图片

 

8，打包JS

8-1：JS语法转换

问题：一些浏览器(尤其是IE)对ES6新语法的支持不够(不兼容), 但前端开发基本都在用ES6+的语法

解决：利用babel相关工具包将 ES6 转换为 ES5

Babel可以将浏览器不能识别的新语法（ES6-11）转换成原来识别的老语法（ES5），浏览器JS兼容性处理。 操作流程：

1,安装babel相关工具包

npm install -D babel-loader @babel/core @babel/preset-env
  • @babel/core babel 的核心库 (本身并不能完成 ES6 转 ES5)
  • @babel/preset-env babel 的预设工具包，将 ES6 新语法转为 ES5
  • babel-loader babel 在 webpack 中的 loader 包

babel 插件包: 每个 ES6 的新语法都有一个对应的 babel 插件包来转换为对应的 ES5 语法

babel 预设包: 包含多个常用的 babel 插件包的一个大的集合包 ==> 简化配置

2,配置 loader

module.exports = {module: {rules: [//配置 babel 的 loader{test: /\.js$/,exclude: /node_modules/, // 不进行处理的文件夹use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env'], // 指定bebel预设包plugins: [], // 指定babel插件包}}},]}
}

 3,设置目标浏览器

问题：webpack5 打包生成的 JS 代码默认是被包裹在『箭头函数』中， 而IE不支持箭头函数

解决：在 package.json 配置说明兼容 IE 浏览器 => 打包文件中的箭头函数变为 function 函数

"browserslist": ["> 0.1%","not ie <=8"
]

 4,执行打包命令

npx webpack

5,babel单独配置文件使用

 (1)在项目根目录[src所在目录]创建一个 .babelrc

{"presets": ["@babel/preset-env"]
}

(2)webpack.config.js

module.exports = {module: {rules: [//配置 babel 的 loader{test: /\.js$/,exclude: /node_modules/, // 不进行处理的文件夹use: 'babel-loader'},]}
}

8-2. JS 兼容性处理

以下内容待更新....

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

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

相关文章

Matlab示例-Examine 16-QAM Using MATLAB学习笔记

Matlab示例-Examine 16-QAM Using MATLAB学习笔记

​工作之余学习16-QAM 写在前面 网上看到许多示例&#xff0c;但一般都比较难以跑通。所以&#xff0c;还是老方法&#xff0c;先将matlab自带的例子研究下。 Examine 16-QAM Using MATLAB Examine 16-QAM Using MATLAB 或者&#xff0c;在matlab中&#xff0c;键入&#x…
阅读更多...
Windows11环境下配置深度学习环境（Pytorch）

Windows11环境下配置深度学习环境（Pytorch）

目录 1. 下载安装Miniconda2. 新建Python3.9虚拟环境3. 下载英伟达驱动4. 安装CUDA版Pytorch5. CPU版本pytorch安装 1. 下载安装Miniconda 下载安装包&#xff1a;镜像文件地址 将Miniconda相关路径添加至系统变量的路径中。 打开Anaconda Powershell Prompt&#xff0c;输入…
阅读更多...
如何将数据库导入MySQL的办法

如何将数据库导入MySQL的办法

在电脑cmd终端进行导入 首先找到MySQL中bin的位置 第一步&#xff1a;找到MySQL 第二步&#xff1a;进入MySQL 第三步&#xff1a;打开bin 第四步&#xff1a;输入cmd进入终端 第五步&#xff1a; 输入mysql -uroot -p 然后会弹出enter password&#xff1a; 输入你的密码…
阅读更多...
Eclipse 自动生成注解,如果是IDEA可以参考编译器自带模版进行修改

Eclipse 自动生成注解,如果是IDEA可以参考编译器自带模版进行修改

IDEA添加自动注解 左上角选择 File -> Settings -> Editor -> File and Code Templates&#xff1b; 1、添加class文件自动注解&#xff1a; ​/*** <b>Function: </b> todo* program: ${NAME}* Package: ${PACKAGE_NAME}* author: Jerry* date: ${YEA…
阅读更多...
08-工厂方法

08-工厂方法

意图 定义一个用于创建对象的接口&#xff0c;让子类决定实例化哪一个类 类图 适用性 在下列情况可以使用工厂方法模式&#xff1a; 当一个类不知道它所必须创建的对象的类的时候。当一个类希望由它的子类来指定它所创建的对象的时候。当类将创建对象的职责委托给多个帮助子…
阅读更多...
电容C 和电感 V-I 特性

电容C 和电感 V-I 特性

1.电容器 QCU 电压等于电流的积分乘以C分之一如下公式&#xff1a; 电容元件是一种储能元件&#xff0c;是一种无源器件。 2.电感元件 UNΔΦ/Δt UL为 在整个电感线圈的里面产生的感生电动势 N为线圈的匝数 ΔΦ 为一个线圈产生的磁通 Δt 为磁通变化的时间的长短 Li…
阅读更多...
87 GB 模型种子，GPT-4 缩小版，超越ChatGPT3.5，多平台在线体验

87 GB 模型种子，GPT-4 缩小版，超越ChatGPT3.5，多平台在线体验

瞬间爆火的Mixtral 8x7B 大家好&#xff0c;我是老章 最近风头最盛的大模型当属Mistral AI 发布的Mixtral 8x7B了&#xff0c;火爆程度压过Google的Gemini。 缘起是MistralAI二话不说&#xff0c;直接在其推特账号上甩出了一个87GB的种子 随后Mixtral公布了模型的一些细节&am…
阅读更多...
如何提高RAG增强的准确性

如何提高RAG增强的准确性

在一个典型的RAG应用开发中&#xff0c;必要的步骤为文档加载&#xff0c;文档拆分&#xff0c;向量化&#xff0c;向量存储。然后基于向量存储进行相似性查询&#xff0c;或基于向量距离的查询。这类查询就叫检索&#xff0c;LangChain所提供的对应组件就是检索器。 但这种方…
阅读更多...
Flink系列之：监控Checkpoint

Flink系列之：监控Checkpoint

Flink系列之&#xff1a;监控Checkpoint 一、概览二、概览&#xff08;Overview&#xff09;选项卡三、历史记录&#xff08;History&#xff09;选项卡四、历史记录数量配置五、摘要信息&#xff08;Summary&#xff09;选项卡六、配置信息&#xff08;Configuration&#xff…
阅读更多...
✺ch3——数学基础

✺ch3——数学基础

目录 3D坐标系和点矩阵单位矩阵转置矩阵逆矩阵逆转置矩阵矩阵的运算矩阵加法()矩阵乘法() 常用的变换矩阵平移矩阵缩放矩阵旋转矩阵透视矩阵正射投影矩阵LookAt矩阵 向量加法和减法点积叉积 局部空间和世界空间——模型矩阵M视觉空间和合成相机——模型-视图矩阵MV用GLSL函数构…
阅读更多...
VR虚拟现实的七大应用领域

VR虚拟现实的七大应用领域

一、工业领域 园区利用虚拟现实技术优化生产管理与节能减排&#xff0c;实现提质增效降本。发展支持多人协作和模拟仿真的虚拟现实开放式服务平台&#xff0c;打通产品设计与制造环节&#xff0c;构建虚实融合的远程运维新型解决方案&#xff0c;适配各类先进制造技术的员工技…
阅读更多...
电影小镇智慧旅游项目技术方案：PPT全文111页，附下载

电影小镇智慧旅游项目技术方案：PPT全文111页，附下载

关键词&#xff1a;智慧旅游项目平台&#xff0c;智慧文旅建设&#xff0c;智慧城市建设&#xff0c;智慧文旅解决方案&#xff0c;智慧旅游技术应用&#xff0c;智慧旅游典型方案&#xff0c;智慧旅游景区方案&#xff0c;智慧旅游发展规划 一、智慧旅游的起源 智慧地球是IB…
阅读更多...
功能测试转向自动化测试 。10 年 心路历程——愿测试人不再迷茫

功能测试转向自动化测试 。10 年 心路历程——愿测试人不再迷茫

十年测试心路历程&#xff1a; 由于历史原因&#xff0c;大部分测试人员&#xff0c;最开始接触都是纯功能界面测试&#xff0c;随着工作年限&#xff0c;会接触到一些常用测试工具&#xff0c;比如抓包&#xff0c;数据库&#xff0c;linux 等。 我大学学的计算机专业&#…
阅读更多...
Mybatis的插件运⾏原理，如何编写⼀个插件？

Mybatis的插件运⾏原理，如何编写⼀个插件？

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…
阅读更多...
18个非技术面试题

18个非技术面试题

请你自我介绍一下你自己&#xff1f; 这道面试题是大家在以后面试过程中会常被问到的&#xff0c;那么我们被问到之后&#xff0c;该如果回答呢&#xff1f;是说姓名&#xff1f;年龄&#xff1f;还是其他什么&#xff1f; 最佳回答提示&#xff1a; 一般人回答这个问题往往会…
阅读更多...
机器视觉技术与应用实战(开运算、闭运算、细化)

机器视觉技术与应用实战(开运算、闭运算、细化)

开运算和闭运算的基础是膨胀和腐蚀&#xff0c;可以在看本文章前先阅读这篇文章机器视觉技术与应用实战&#xff08;Chapter Two-04&#xff09;-CSDN博客 开运算&#xff1a;先腐蚀后膨胀。开运算可以使图像的轮廓变得光滑&#xff0c;具有断开狭窄的间断和消除细小突出物的作…
阅读更多...
ELK（八）—Metricbeat部署

ELK（八）—Metricbeat部署

目录 介绍修改配置文件启动 Modulenginx开启状态查询配置Nginx module查看是否配置成功 介绍 Metricbeat 是一个轻量级的开源度量数据收集器&#xff0c;用于监控系统和服务。它由 Elastic 公司开发&#xff0c;并作为 Elastic Stack&#xff08;Elasticsearch、Logstash、Kiba…
阅读更多...
华为鸿蒙应用--欢迎页SplashPage+倒计时跳过（自适应手机和平板）-ArkTs

华为鸿蒙应用--欢迎页SplashPage+倒计时跳过（自适应手机和平板）-ArkTs

鸿蒙ArkTS 开发欢迎页SplashPage倒计时跳过&#xff0c;可自适应平板和手机&#xff1a; 一、SplashPage.ts import { BreakpointSystem, BreakPointType, Logger, PageConstants, StyleConstants } from ohos/common; import router from ohos.router;Entry Component struct…
阅读更多...
Stable-Diffusion|从图片反推prompt的工具：Tagger（五）

Stable-Diffusion|从图片反推prompt的工具：Tagger（五）

stable-diffusion-webui-wd14-tagger 前面几篇&#xff1a; Stable-Diffusion|window10安装GPU版本的 Stable-Diffusion-WebUI遇到的一些问题&#xff08;一&#xff09; 【Stable-Diffusion|入门怎么下载与使用civitai网站的模型&#xff08;二&#xff09;】 Stable-Diffusi…
阅读更多...
【PHP入门】1.1-PHP初步语法

【PHP入门】1.1-PHP初步语法

-PHP语法初步- PHP是一种运行在服务器端的脚本语言&#xff0c;可以嵌入到HTML中。 1.1.1PHP代码标记 在PHP历史发展中&#xff0c;可以使用多种标记来区分PHP脚本 ASP标记&#xff1a; <% php代码 %>短标记&#xff1a; <? Php代码 ?>&#xff0c;以上两种…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023