Webpack的使用

        Webpack 是一个现代前端自动化构建工具，能将各种资源（JS/CSS/图片等）作为模块处理，根据依赖关系生成优化后的静态资源。

1. Webpack 基础概念

Webpack 的核心概念包括：

1. 入口（Entry）：指定构建过程的起点文件，Webpack 从这里开始分析依赖关系。例如，一个 index.js 文件作为入口点。

2. 出口（Output）：定义输出文件的路径和名称，配置打包后的资源存放位置，如 dist 目录。

3. 加载器（Loaders）：用于处理非 JavaScript 文件（如 CSS、图片），将它们转换为 Webpack 可识别的模块。例如，使用 css-loader 处理 CSS 文件。

4. 插件（Plugins）：执行更广泛的任务，如优化代码、注入环境变量或生成 HTML 文件。常见插件如 HtmlWebpackPlugin。

5. 模式（Mode）：设置开发（development）或生产（production）模式，以启用不同的内置优化（如代码压缩）。

6. 模块（Modules）：每个文件被视为独立模块，通过 import 或 require 语句加载，Webpack 会递归解析所有依赖。

7. 依赖图（Dependency Graph）：Webpack 从入口开始，递归收集所有相关模块，形成一个依赖关系图，用于最终打包。

通过这些概念，Webpack 能高效管理资源，提升应用性能。

2.Webpack的操作

1.初始化项目：

index.js内容：

终端输入：

npm init -y

2.安装 Webpack 及 Webpack CLI（命令行工具）

npm install webpack webpack-cli --save-dev

3. 创建并配置Webpack文件

配置内容：

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

4.配置package.json文件：

在 package.json 中添加 scripts 方便运行 Webpack：

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

5.运行Webpack

终端输入：

npm run build

Webpack 会打包 src/index.js，生成 dist/bundle.js。