【webpack基本使用】Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它能够将各种资源（如 JavaScript、CSS、图片等）视为模块，并通过依赖关系进行打包，最终生成优化后的输出文件。以下是 webpack 的基本使用方法和相关配置说明。
一、Webpack 基本概念
| 概念 | 说明 |
| Entry | 打包的入口文件，通常是 `index.js` 或其他入口模块。 |
| Output | 打包后文件的输出路径和文件名。 |
| Loader | 用于处理非 JavaScript 文件，如 CSS、图片、字体等。 |
| Plugin | 用于执行更广泛的任务，如代码压缩、环境变量注入等。 |
| Mode | 设置为 `development` 或 `production`，影响打包方式。 |
二、Webpack 安装与初始化
1. 安装 Node.js 和 npm
确保已安装 Node.js 和 npm，可以通过以下命令检查：
```bash
node -v
npm -v
```
2. 创建项目目录并初始化
在终端中执行以下命令：
```bash
mkdir my-webpack-project
cd my-webpack-project
npm init -y
```
3. 安装 Webpack
安装 Webpack 及其 CLI 工具：
```bash
npm install --save-dev webpack webpack-cli
```
三、基本配置示例
在项目根目录创建 `webpack.config.js` 文件，
```javascript
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.js', // 输出文件名
path: path.resolve(__dirname, 'dist'), // 输出路径
},
mode: 'development', // 开发模式
};
```
四、常用 Loader 示例
| Loader | 用途 | 安装命令 |
| babel-loader | 将 ES6+ 代码转译为浏览器兼容的代码 | `npm install -D babel-loader @babel/core @babel/preset-env` |
| css-loader | 处理 CSS 文件 | `npm install -D css-loader` |
| style-loader | 将 CSS 插入页面中 | `npm install -D style-loader` |
| file-loader | 处理图片、字体等静态资源 | `npm install -D file-loader` |
五、常用 Plugin 示例
| Plugin | 用途 | 安装命令 |
| HtmlWebpackPlugin | 自动生成 HTML 文件并注入打包后的 JS 文件 | `npm install -D html-webpack-plugin` |
| MiniCssExtractPlugin | 将 CSS 提取为单独文件 | `npm install -D mini-css-extract-plugin` |
| CleanWebpackPlugin | 清理旧的打包文件 | `npm install -D clean-webpack-plugin` |
六、运行 Webpack
在 `package.json` 中添加启动脚本：
```json
"scripts": {
"build": "webpack --mode production"
}
```
然后运行：
```bash
npm run build
```
七、总结
Webpack 是一个强大且灵活的构建工具，适用于现代前端开发。掌握其基本使用方法可以帮助开发者高效地组织和优化项目资源。通过合理配置 Entry、Output、Loader 和 Plugin，可以实现自动化打包、代码压缩、资源管理等功能。
| 关键点 | 内容 |
| 入口文件 | `entry` 配置 |
| 输出路径 | `output` 配置 |
| 资源处理 | 使用 Loader |
| 功能扩展 | 使用 Plugin |
| 构建模式 | `development` 或 `production` |
通过以上步骤和配置，你可以快速上手并使用 Webpack 进行项目构建。
