Webpack 从入门到精通

(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）

目录

一、Webpack 简介

二、Webpack 的核心概念

三、Webpack 的安装与配置

安装 Node.js

安装 Webpack

初始化项目

安装项目依赖的 Webpack

创建项目文件

配置 Webpack

修改 package.json

构建项目

四、加载器（Loaders）的使用

使用 CSS 加载器

使用图片加载器

五、插件（Plugins）的使用

使用 HtmlWebpackPlugin

使用 CleanWebpackPlugin

六、开发服务器（DevServer）

安装 webpack-dev-server

配置 devServer

修改 package.json

启动开发服务器

一、Webpack 简介

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。它会根据模块的依赖关系，递归地构建一个依赖图（dependency graph），然后将这些模块打包成一个或多个 bundle。

Webpack 的主要目标是将 JavaScript 文件打包在一起用于在浏览器中使用，但它也能够通过 loader 的机制来打包其他资源，如 CSS、图片和 HTML。

二、Webpack 的核心概念

  1. 入口（Entry）：Webpack 应该使用哪个模块作为构建其内部依赖图的开始。换句话说，入口起点指示 webpack 应该使用哪个模块作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

  2. 输出（Output）：告诉 Webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程。

  3. 加载器（Loaders）：让 Webpack 能够去处理那些非 JavaScript 文件（Webpack 自身只理解 JavaScript）。加载器可以将所有类型的文件转换为 Webpack 能够处理的有效模块，然后你就可以利用 Webpack 的打包能力，对它们进行处理。

  4. 插件（Plugins）：可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境变量。插件接口功能极其强大，可以用来处理各种各样的任务。

  5. 模式（Mode）：通过设置 mode 参数为 'development' 或 'production'，你可以启用相应模式下的 Webpack 内置的优化。

三、Webpack 的安装与配置

安装 Node.js

Webpack 是运行在 Node.js 之上的，因此首先需要安装 Node.js。你可以从 Node.js 官网 下载并安装。

安装 Webpack

打开终端或命令提示符，运行以下命令全局安装 Webpack 和 Webpack CLI：

npm install -g webpack webpack-cli

初始化项目

创建一个新的目录作为项目文件夹，并初始化 npm：

mkdir my-webpack-project  
cd my-webpack-project  
npm init -y

安装项目依赖的 Webpack

在项目文件夹中，安装 Webpack 作为项目的开发依赖：

npm install --save-dev webpack webpack-cli

创建项目文件

在项目文件夹中，创建以下文件：

  • src/index.js：入口文件。
  • dist/index.html：用于测试打包后的 JavaScript 文件。

配置 Webpack

在项目根目录下创建一个名为 webpack.config.js 的文件，这是 Webpack 的配置文件。以下是一个基本的配置示例：

const path = require('path');  module.exports = {  mode: 'development', // 开发模式  entry: './src/index.js', // 入口文件  output: { // 输出配置  filename: 'bundle.js', // 输出文件名  path: path.resolve(__dirname, 'dist'), // 输出路径  },  
};

修改 package.json

在 package.json 文件的 scripts 部分添加一个构建脚本：

"scripts": {  "build": "webpack"  
},

构建项目

在终端或命令提示符中运行以下命令来构建项目：

npm run build

构建成功后，dist 目录下会生成 bundle.js 文件。你可以在 dist/index.html 文件中引入这个脚本来测试。

四、加载器（Loaders）的使用

Webpack 通过使用加载器（loaders）来提供一种机制来预处理文件。这允许你打包除 JavaScript 以外的任何静态资源。

使用 CSS 加载器

为了能够让 Webpack 处理 CSS 文件，你需要使用 css-loader 和 style-loader。css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 <style> 标签中。

安装 CSS 加载器：

npm install --save-dev css-loader style-loader

配置 Webpack 以使用 CSS 加载器：

const path = require('path');  module.exports = {  // ...  module: {  rules: [  {  test: /\.css$/, // 正则表达式，匹配 CSS 文件  use: [  'style-loader', // 将 JS 字符串生成为 style 节点  'css-loader', // 将 CSS 转化成 CommonJS 模块  ],  },  ],  },  
};

现在你可以在 JavaScript 文件中导入 CSS 文件了，例如：

import './style.css';

使用图片加载器

为了能够在 JavaScript 模块中导入图片，你需要使用 file-loader。

安装图片加载器：

npm install --save-dev file-loader

配置 Webpack 以使用图片加载器：

module.exports = {  // ...  module: {  rules: [  // ...  {  test: /\.(png|svg|jpg|jpeg|gif)$/i, // 正则表达式，匹配图片文件  use: [  'file-loader', // 将文件发送到输出文件夹，并返回（相对）URL  ],  },  ],  },  
};

现在你可以在 JavaScript 文件中导入图片文件了，例如：

import imgSrc from './image.png';

五、插件（Plugins）的使用

Webpack 拥有丰富的插件系统，大多数内部功能都是基于这个插件系统构建的。这使得 Webpack 可以非常灵活地进行扩展。

使用 HtmlWebpackPlugin

HtmlWebpackPlugin 是一个非常有用的插件，它可以为你生成一个 HTML5 文件，其中包括使用 script 标签的 body 中的所有 webpack 包。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。

安装 HtmlWebpackPlugin：

npm install --save-dev html-webpack-plugin

配置 Webpack 以使用 HtmlWebpackPlugin：

const HtmlWebpackPlugin = require('html-webpack-plugin');  
const path = require('path');  module.exports = {  // ...  plugins: [  new HtmlWebpackPlugin({  title: 'Webpack App', // 生成 HTML 文件的标题  template: './src/template.html', // 自定义模板文件路径  }),  ],  
};

现在当你运行 Webpack 构建时，它会生成一个包含你的 bundle 的 index.html 文件，并将其输出到 dist 目录下。

使用 CleanWebpackPlugin

CleanWebpackPlugin 用于在每次构建前清理（删除）dist 文件夹。

安装 CleanWebpackPlugin：

npm install --save-dev clean-webpack-plugin

配置 Webpack 以使用 CleanWebpackPlugin：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');  module.exports = {  // ...  plugins: [  // ...  new CleanWebpackPlugin(), // 添加 CleanWebpackPlugin  ],  
};

六、开发服务器（DevServer）

Webpack 提供了一个可选的本地开发服务器，这个本地服务器基于 node.js 构建，可以实现你想要的让浏览器自动刷新显示你所修改后的结果。

安装 webpack-dev-server

npm install --save-dev webpack-dev-server

配置 devServer

修改 webpack.config.js 文件，添加 devServer 配置：

module.exports = {  // ...  devServer: {  static: './dist', // 告诉服务器从哪里提供内容  open: true, // 自动打开浏览器  },  
};

修改 package.json

在 package.json 文件的 scripts 部分添加一个启动开发服务器的脚本：

"scripts": {  // ...  "start": "webpack serve --open"  
},

启动开发服务器

在终端或命令提示符中运行以下命令来启动开发服务器：

npm start

现在，当你修改源代码并保存时，Webpack 会自动重新编译代码，并且浏览器会自动刷新显示最新的结果。

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

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

相关文章

戴着苹果Vision Pro，如何吃花生米

戴着苹果Vision Pro，如何吃花生米

6月底苹果Vision Pro国内开售&#xff0c;我早早到官网预订了一台。选择必要的配件&#xff0c;输入视力信息&#xff0c;定制符合自己视力的蔡司镜片。确实贵。把主要配件和镜片配齐&#xff0c;要3万6&#xff0c;比Pico、META的眼镜贵一个数量级。 Vision Pro出来后&#x…
阅读更多...
C语言之.(结构体，枚举，共用体的应用)

C语言之.(结构体，枚举，共用体的应用)

C语言之.(结构体&#xff0c;枚举&#xff0c;共用体的应用) 结构体&#xff0c;套联合体&#xff0c;枚举的应用例子
阅读更多...
C语言100基础拔高题（3）

C语言100基础拔高题（3）

1.利用递归函数调用方式&#xff0c;将所输入的5个字符&#xff0c;以相反顺序打印出来。 解题思路&#xff1a;通过反复调用一个打印最后一个元素的函数&#xff0c;来实现此功能。源代码如下: #include<stdio.h> void oposize(char str[], int len); int main() {//利…
阅读更多...
Springboot集成Elasticsearch High Level REST Client实现增删改查实战

Springboot集成Elasticsearch High Level REST Client实现增删改查实战

获取源码&#x1f6a9; 需要完整代码资料&#xff0c;请一键三连后评论区留下邮箱&#xff0c;安排发送&#xff01;&#xff01;&#xff01;&#x1f916; 什么是High Level REST Client&#xff1f; Elasticsearch 的 High Level REST Client 是一个用于与 Elasticsearch…
阅读更多...
ARCGIS PRO DSK GraphicsLayer创建文本要素

ARCGIS PRO DSK GraphicsLayer创建文本要素

一、判断GraphicsLayer层【地块注记】是否存在&#xff0c;如果不存在则新建、如果存在则删除所有要素 Dim GraphicsLayer pmap.GetLayersAsFlattenedList().OfType(Of ArcGIS.Desktop.Mapping.GraphicsLayer).FirstOrDefault() 获取当前map对象中的GetLayer图层 Await Queue…
阅读更多...
Web 安全之 OOB（Out-of-Band）攻击详解

Web 安全之 OOB（Out-of-Band）攻击详解

OOB&#xff08;Out-of-Band&#xff09;攻击是指一种网络安全攻击技术&#xff0c;攻击者利用目标系统与外部资源之间的通信来获取信息或检测漏洞是否存在。这种攻击方式不会通过目标系统的直接响应来显示攻击结果&#xff0c;而是通过外部信道&#xff08;如 DNS、HTTP、SMTP…
阅读更多...
用python解释进程与协程（python实例二十八）

用python解释进程与协程（python实例二十八）

目录 1.认识Python 2.环境与工具 2.1 python环境 2.2 Visual Studio Code编译 3.创建进程池&#xff0c;异步执行多个任务 3.1 代码构思 3.2 代码示例 3.3 运行结果 4. 模拟协程堵塞 4.1 代码构思 4.2 代码示例 4.3 运行结果 5.总结 1.认识Python Python 是一个高…
阅读更多...
Javascript前端面试（七）

Javascript前端面试（七）

JavaScript 部分 1. JavaScript 有哪些数据类型&#xff0c;它们的区别&#xff1f; JavaScript 共有八种数据类型&#xff0c;分别是 Undefined、Null、Boolean、 Number、String、Object、Symbol、BigInt。 其中 Symbol 和 BigInt 是 ES6 中新增的数据类型&#xff1a; ●Sym…
阅读更多...
指标体系建设的方法论

指标体系建设的方法论

一、分析痛点 了解当前数仓侧与业务应用方对指标到不到、难使用的痛点及日常指标使用习惯&#xff0c;制定指标中心所需功能并设计指标中心样式。 二、指定指标规范 定义指标类型、指标使用方、确定指标域(这里是数据域)、指标要具备的属性(业务/技术口径、负责人、类型等)。 …
阅读更多...
多元多项式方程组任意精度求解程序

多元多项式方程组任意精度求解程序

项目地址&#xff1a; https://gitee.com/tianwangwxm/polynomial-equation运行结果 D:\src\Twwxm2DKernel\cmake-build-release-cygwin\TwWxm2DKernel.exe 已知方程组&#xff1a; ───────────────────────────────────────────…
阅读更多...
04-Charles中的Map Remote和Map Local介绍

04-Charles中的Map Remote和Map Local介绍

Charles提供了Map Remote和Map Local两个功能。 Map Remote是将指定的网络请求重定向到另一个网址。Map Local是将指定的网络请求重定向到本地文件。 一、Map Remote 假设代码中调用了接口A&#xff0c;但是接口A的响应结果不能满足需求&#xff1b;此时&#xff0c;有另一个…
阅读更多...
SAPUI5基础知识18 - 自定义CSS和主题色

SAPUI5基础知识18 - 自定义CSS和主题色

1. 背景 在上一篇博客中&#xff0c;我们通过使用SAPUI5提供的CSS类实现元素间距的调整。在本篇博客中&#xff0c;让我们看一下如何实现自定义的CSS样式。 2. 背景知识 2.1 CSS基础语法 CSS&#xff0c;全称为级联样式表&#xff08;Cascading Style Sheets&#xff09;&a…
阅读更多...
【更新2023】省级农林牧渔业产值面板数据 含分项 1949-2023

【更新2023】省级农林牧渔业产值面板数据 含分项 1949-2023

省级农林牧渔业产值面板数据是研究农业经济和区域发展的重要资源。这些数据可以被用来分析不同省份间农业产值的时空变化及其影响因素&#xff0c;探讨政策对农业发展的影响&#xff0c;评估农业现代化和可持续发展水平&#xff0c;以及比较不同地区农业产值的竞争力和效率。此…
阅读更多...
python学习笔记——字符串

python学习笔记——字符串

一、创建字符串 1.我们可以使用引号( 或 " )来创建字符串。创建字符串很简单&#xff0c;只要为变量分配一个值即可。 var1 Hello World! var2 "Runoob" 二、访问字符串中的值 1.Python 访问子字符串&#xff0c;可以使用方括号 [] 来截取字符串。…
阅读更多...
在Android上实现汉字笔顺动画效果——HanZiWriter

在Android上实现汉字笔顺动画效果——HanZiWriter

序&#xff0c;万般皆是命&#xff0c;半点不由人。 Hanzi Writer 是 javascript 免费开源库&#xff0c;根据汉字书写时按照笔画顺序的特征&#xff0c;可以播放正确笔画顺序的描边动画和练习测试。支持简体字和繁体字。可以让全球用户能够通过手绘模仿的方式来学习和练习书写…
阅读更多...
gym105139C

gym105139C

题意&#xff1a;网格图上面有一个区域&#xff0c;你要用最少的不相交的矩形精确覆盖整个区域。 我们将精确覆盖看成切割&#xff0c;也就是将这个区域切成最少的矩形。 首先&#xff0c;我们将270的角称为凹点&#xff0c;90的角称为凸点&#xff0c;很明显我们的目标是要把…
阅读更多...
Python网络爬虫详解：实战豆瓣电影信息采集

Python网络爬虫详解：实战豆瓣电影信息采集

文章目录 前言一、爬虫是什么&#xff1f;二、常用库及其作用1.Requests2.BeautifulSoup3. lxml4. Scrapy5. Selenium6. PyQuery7. Pandas8. JSON9. Time 三、实现步骤步骤一&#xff1a;环境准备步骤二&#xff1a;数据采集步骤三&#xff1a;数据处理步骤四&#xff1a;数据存…
阅读更多...
算法日记day 19（找树左下角的值|路径总和）

算法日记day 19（找树左下角的值|路径总和）

一、找树左下角的值 题目&#xff1a; 给定一个二叉树的 根节点 root&#xff0c;请找出该二叉树的 最底层 最左边 节点的值。 假设二叉树中至少有一个节点。 示例 1: 输入: root [2,1,3] 输出: 1示例 2: 输入: [1,2,3,4,null,5,6,null,null,7] 输出: 7 思路&#xff1a;…
阅读更多...
[Windows CMD] 检测网络连通性 ping

[Windows CMD] 检测网络连通性 ping

ping 是一个非常常用的网络工具&#xff0c;用于测试网络连接的可达性和测量网络延迟。它通过发送 ICMP (Internet Control Message Protocol) Echo Request 数据包到目标主机&#xff0c;并等待接收回显应答 (Echo Reply) 来工作。ping 命令可以帮助您快速检测网络问题&#x…
阅读更多...
LinkedList 实现 LRU 缓存

LinkedList 实现 LRU 缓存

LRU&#xff08;Least Recently Used&#xff0c;最近最少使用&#xff09;缓存是一种缓存淘汰策略&#xff0c;用于在缓存满时淘汰最久未使用的元素。 关键&#xff1a; 缓存选什么结构&#xff1f; 怎么实现访问顺序&#xff1f; import java.util.*;public class LRUCac…
阅读更多...
最新文章

Copyright @ 2022~2023