Webpack 基础入门

server/2025/2/22 19:31:55/

一、Webpack 是什么

Webpack 是一款现代 JavaScript 应用程序的静态模块打包工具。在 Web 开发中，我们的项目会包含各种类型的文件，如 JavaScript、CSS、图片等。Webpack 可以将这些文件打包成一个或多个文件，以便在浏览器中高效加载。它就像是一个超级管家，把项目中的各种资源整理打包，让它们能更好地协同工作。

二、为什么要使用 Webpack

  1. 代码拆分：可以将代码拆分成多个块，实现按需加载，提高页面加载速度。比如一个大型项目，有些功能可能不是用户一开始就需要的，Webpack 可以把这些功能代码单独打包，等用户用到时再加载。
  2. 模块加载：支持各种模块加载方式，如 ES6 模块、CommonJS 模块等，统一管理项目中的模块依赖。
  3. 处理不同类型文件：不仅能处理 JavaScript，还能处理 CSS、Sass、Less 等样式文件，以及图片、字体等资源文件。

三、Webpack 基础入门

（一）安装 Webpack

  1. 首先确保你已经安装了 Node.js，因为 Webpack 是基于 Node.js 运行的。
  2. 全局安装 Webpack 和 Webpack - CLI（命令行界面）：
npm install webpack webpack - cli -g

（二）创建项目结构

  1. 创建一个新的文件夹，例如webpack - demo。
  2. 在该文件夹下创建以下文件和文件夹：
    • src文件夹：用于存放源文件，在src文件夹下创建index.js文件。
    • dist文件夹：用于存放打包后的文件，这个文件夹一开始可以不存在，Webpack 会在打包时自动生成。

（三）编写基础代码

在src/index.js中编写如下代码：

function add(a, b) {return a + b;
}
const result = add(1, 2);
console.log(result);

（四）配置 Webpack

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

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

这里配置了入口文件entry为src/index.js，表示从这个文件开始打包；output指定了打包后的文件名filename为bundle.js，输出路径path为dist文件夹。

（五）执行打包

在命令行中进入项目根目录，执行以下命令：

webpack - - config webpack.config.js

执行成功后，会在dist文件夹下生成bundle.js文件。这个文件就是打包后的文件，包含了src/index.js中的代码以及相关依赖。

四、Webpack 核心功能

（一）加载器（Loaders）

  1. 作用：Webpack 本身只能处理 JavaScript 和 JSON 文件，Loaders 可以让 Webpack 处理其他类型的文件，如 CSS、图片等。
  2. 使用示例 - 加载 CSS 文件：
    • 安装css - loader和style - loader：
npm install css - loader style - loader --save - dev
  • 在src文件夹下创建styles.css文件，添加一些简单的样式：
body {background - color: lightblue;
}
  • 修改src/index.js文件，引入styles.css：
import './styles.css';
function add(a, b) {return a + b;
}
const result = add(1, 2);
console.log(result);
  • 修改webpack.config.js文件，配置加载器：
const path = require('path');
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/,use: ['style - loader', 'css - loader']}]}
};

这里module.rules配置了一个规则，test表示匹配所有.css文件，use指定了使用style - loader和css - loader来处理这些文件。css - loader负责解析 CSS 文件，style - loader负责将解析后的 CSS 插入到 HTML 页面中。

（二）插件（Plugins）

  1. 作用：插件可以扩展 Webpack 的功能，实现更复杂的任务，如代码压缩、生成 HTML 文件、提取 CSS 为单独文件等。
  2. 使用示例 - 使用 HtmlWebpackPlugin 生成 HTML 文件： 
npm install html - webpack - plugin --save - dev
  • 修改webpack.config.js文件，添加插件配置：
const path = require('path');
const HtmlWebpackPlugin = require('html - webpack - plugin');
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/,use: ['style - loader', 'css - loader']}]},plugins: [new HtmlWebpackPlugin({title: 'Webpack Demo',template: './src/index.html'})]
};

这里引入了HtmlWebpackPlugin插件，配置了title为页面标题，template指定了使用src/index.html作为模板来生成 HTML 文件。在src文件夹下创建index.html文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF - 8"><title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body><script src="bundle.js"></script>
</body>
</html>

再次执行打包命令，会在dist文件夹下生成一个 HTML 文件，并且自动引入了打包后的bundle.js文件。

  1. 常用插件补充
    • TerserPlugin：用于压缩 JavaScript 代码，减小文件体积，提升加载速度。它是 Webpack 4 + 版本默认的代码压缩插件，无需额外安装。在webpack.config.js中配置如下：
const path = require('path');
const HtmlWebpackPlugin = require('html - webpack - plugin');
const TerserPlugin = require('terser - webpack - plugin');
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/,use: ['style - loader', 'css - loader']}]},plugins: [new HtmlWebpackPlugin({title: 'Webpack Demo',template: './src/index.html'})],optimization: {minimizer: [new TerserPlugin()]}
};
  • MiniCssExtractPlugin：将 CSS 从 JavaScript 文件中提取出来，生成单独的 CSS 文件。这在生产环境中很有用，因为浏览器可以单独缓存 CSS 文件。安装命令：
npm install mini - css - extract - plugin --save - dev

在webpack.config.js中配置如下：

const path = require('path');
const HtmlWebpackPlugin = require('html - webpack - plugin');
const MiniCssExtractPlugin = require('mini - css - extract - plugin');
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader, 'css - loader']}]},plugins: [new HtmlWebpackPlugin({title: 'Webpack Demo',template: './src/index.html'}),new MiniCssExtractPlugin({filename:'styles.css'})]
};
  • CleanWebpackPlugin：在每次打包前清空输出目录，避免残留旧文件。安装命令：
npm install clean - webpack - plugin --save - dev

在webpack.config.js中配置如下：

const path = require('path');
const HtmlWebpackPlugin = require('html - webpack - plugin');
const MiniCssExtractPlugin = require('mini - css - extract - plugin');
const { CleanWebpackPlugin } = require('clean - webpack - plugin');
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader, 'css - loader']}]},plugins: [new HtmlWebpackPlugin({title: 'Webpack Demo',template: './src/index.html'}),new MiniCssExtractPlugin({filename:'styles.css'}),new CleanWebpackPlugin()]
};

（三）代码拆分与按需加载配置

  1. 原理：Webpack 的代码拆分是指将一个大的 JavaScript 文件拆分成多个小的文件，这些小文件可以在需要的时候再加载。按需加载就是在特定的时机（比如用户点击某个按钮、访问某个路由等）才加载对应的代码块，而不是在页面一开始就加载所有代码，从而提高页面的初始加载速度和用户体验。
  2. 基础配置：在 Webpack 4 + 版本中，可以使用splitChunks配置项来实现代码拆分。在webpack.config.js中添加如下配置：
const path = require('path');
const HtmlWebpackPlugin = require('html - webpack - plugin');
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),// 为动态导入的代码块指定输出路径和文件名chunkFilename: '[name].[chunkhash].js'},module: {rules: [{test: /\.css$/,use: ['style - loader', 'css - loader']}]},plugins: [new HtmlWebpackPlugin({title: 'Webpack Demo',template: './src/index.html'})],optimization: {splitChunks: {chunks: 'all'}}
};

optimization.splitChunks.chunks: 'all’表示对所有类型的 chunk（入口 chunk、异步 chunk 等）都进行代码拆分。这里output.chunkFilename用于指定非入口 chunk（动态导入的代码块）的输出文件名，[name]会被替换为代码块的名称，[chunkhash]会根据代码块内容生成哈希值，用于缓存控制。

  1. 实际应用示例 - 动态导入模块实现按需加载：
    • 在src文件夹下创建一个新的文件math.js，编写如下代码：
export function multiply(a, b) {return a * b;
}
  • 修改src/index.js文件，通过动态导入的方式引入math.js模块：
import './styles.css';
function add(a, b) {return a + b;
}
const result = add(1, 2);
console.log(result);
// 点击按钮时动态导入math.js模块并调用multiply函数
document.addEventListener('DOMContentLoaded', function () {const button = document.createElement('button');button.textContent = '点击计算乘法';document.body.appendChild(button);button.addEventListener('click', function () {import('./math.js').then((module) => {const product = module.multiply(3, 4);console.log('乘法结果:', product);});});
});

这里使用import(‘./math.js’)动态导入math.js模块，这是 ES2020 引入的动态导入语法，Webpack 会自动将其拆分成一个单独的代码块。当用户点击按钮时，才会加载这个代码块，实现了按需加载。执行打包命令后，在dist文件夹下会生成除了bundle.js之外的math.[chunkhash].js文件，这就是拆分出来的代码块。

五、总结

通过以上步骤，我们对 Webpack 的基础和核心功能有了初步了解。Webpack 还有很多高级特性，如代码优化、热模块替换等，后续可以进一步深入学习。希望这篇文章能帮助大家顺利入门 Webpack，开启高效的 Web 开发之旅。


http://www.ppmy.cn/server/169045.html

相关文章

STM32 看门狗

STM32 看门狗

目录 背景 独立看门狗&#xff08;IWDG&#xff09; 寄存器访问保护 窗口看门狗&#xff08;WWDG&#xff09; 程序 独立看门狗 设置独立看门狗程序 第一步、使能对独立看门狗寄存器的写操作 第二步、设置预分频和重装载值 第三步、喂狗 第四步、使能独立看门狗 喂狗…
阅读更多...
【AIDevops】Deepseek驱动无界面自动化运维与分布式脚本系统，初探运维革命之路

【AIDevops】Deepseek驱动无界面自动化运维与分布式脚本系统，初探运维革命之路

声明&#xff1a;笔者当前文章内容仍在构想阶段&#xff0c;仅部分实现 目录 引言 第一部分&#xff1a;基于DeepSeek大模型的单机GPT实现 1. DeepSeek大模型简介 2. 功能概述 3. 项目优势&#xff0c;实现技术栈及实现功能 4. 示例展示 5.腾讯云AI代码助手助力 第二部…
阅读更多...
Java中Map循环安全的删除数据的4中方法

Java中Map循环安全的删除数据的4中方法

文章目录 前言一、使用Iterator删除二、使用 removeIf&#xff08;Java 8&#xff09;三、遍历时记录需要删除的键&#xff08;不推荐&#xff09;四、使用 Stream&#xff08;Java 8&#xff09;总结 前言 在 Java 中&#xff0c;遍历 HashMap 并删除数据时&#xff0c;直接使…
阅读更多...
vue 接口传formdata

vue 接口传formdata

在Vue中&#xff0c;如果你需要向服务器发送FormData对象&#xff0c;通常是为了上传文件或者需要发送表单数据。FormData是一个非常有用的工具&#xff0c;因为它可以直接使用表单元素的值以及文件内容&#xff0c;并以一种浏览器兼容的方式来发送这些数据。下面是如何在Vue中…
阅读更多...
Zoho Books：简单好用的外贸订单管理系统，外贸跟单自动化处理

Zoho Books：简单好用的外贸订单管理系统，外贸跟单自动化处理

在全球贸易日益紧密的今天&#xff0c;外贸行业蓬勃发展&#xff0c;但外贸订单的跟单工作却让许多从业者头疼不已。如何高效管理订单&#xff0c;确保货物按时、按质交付&#xff0c;成为外贸企业提升竞争力的关键。这时候&#xff0c;一款优秀的外贸订单管理系统就显得尤为重…
阅读更多...
pytest asyncio 支持插件 pytest-asyncio

pytest asyncio 支持插件 pytest-asyncio

pytest 是 Python 测试框架&#xff0c;但其不支持基于 asyncio 的异步程序&#xff08;例如&#xff0c;测试 FastAPI 异步代码&#xff09;&#xff0c;pytest-asyncio 是一个 pytest 插件&#xff0c;该插件赋予 pytest 可以测试使用 asyncio 库代码的能力。 https://github…
阅读更多...
[AI]Mac本地部署Deepseek R1模型 — — 保姆级教程

[AI]Mac本地部署Deepseek R1模型 — — 保姆级教程

[AI]Mac本地部署DeepSeek R1模型 — — 保姆级教程 DeepSeek R1是中国AI初创公司深度求索&#xff08;DeepSeek&#xff09;推出大模型DeepSeek-R1。 作为一款开源模型&#xff0c;R1在数学、代码、自然语言推理等任务上的性能能够比肩OpenAI o1模型正式版&#xff0c;并采用MI…
阅读更多...
Mac访问局域网Jenkins

Mac访问局域网Jenkins

主要修改两个文件 第一个是 &#xff5e;/Library/LaunchAgents/homebrew.mxcl.jenkins.plist 第二个 ⚠️注意如果是使用 brew 安装的 Jenkins 可以在终端执行brew info jenkins查看你安装 Jenkins 的路径&#xff0c;执行完看控制台 比如我的是 ~ % brew info jenkins >…
阅读更多...
最新文章

Copyright @ 2022~2023