# 2305-webpack

**Repository Path**: Elvmx/2305-webpack

## Basic Information

- **Project Name**: 2305-webpack
- **Description**: 2305-webpack
2305-webpack
2305-webpack
2305-webpack
2305-webpack
2305-webpack
2305-webpack
2305-webpack
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2023-09-05
- **Last Updated**: 2023-12-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Webpack

#### Webpack 的核心概念

1. 模块
2. 入口文件

   - 让 Webpack 构建资源时从那个文件开始

3. 出口文件

   - 构建完成的静态资源需要放到哪里

4. Loader 转换器

   - Webpack 默认是只能认识 .js|.json 文件。如果需要对其它类型的文件做构建操作，则需要对应的 Loader 转换器来操作，先将其转换成 Webpack 能够识别的内容

5. Plugins 插件

   - 能够加强 Webpack 的能力，在构建前后能够对资源做一些额外的处理

#### Webpack 的起步

1. 全局安装 / 局部安装

```sh
npm install -g webpack
npm install -g webpack-cli
```

```sh
npm install webpack
npm install webpack-cli
```

2. 验证安装是否完成

- ./node_modules/.bin/webpack -v
- npx webpack -v
- package.json 的 scripts 中配置一个脚本

#### Webpack 命令选项

```
"dev": "webpack --mode development --watch",
"build": "webpack --mode production",
"build:main": "webpack --entry ./src/main.js -o ./build",
```

#### Webpack 的配置文件

> 在 webpack 命令后面写很多选项的方式不太方便，我们可以在项目根目录下创建一个 `webpack.config.js` 文件，该文件导出一个对象。运行 webpack 命令时，默认会加载该文件夹做为配置文件。