# webpack

**Repository Path**: zhangcscc/webpack

## Basic Information

- **Project Name**: webpack
- **Description**: 手动配置脚手架webpack
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-16
- **Last Updated**: 2022-07-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: webpack, Nodejs

## README

# webpack

#### 介绍
手动配置脚手架webpack

#### 初始化项目
```
npm init -y
```

#### 安装webpack

```
npm install webpack webpack-cli --save-dev
或者
npm i webpack webpack-cli -D  

解释：
webpack：是webpack工具的核心包
webpack-cli：提供了一些在终端中使用的命令
```

#### 配置 webpack.config.js

参考：https://webpack.docschina.org/configuration/

#### 启动

```
npm run start
```

#### 构建

```
npm run build
```

#### 相关开发依赖

| 名称                | 功能                                                         |
| ------------------- | :----------------------------------------------------------- |
| webpack             | 静态模块打包工具                                             |
| webpack-cli         | 此工具用于在命令行中运行 webpack                             |
| webpack-dev-server  | 开发工具，提供了一个简单的 web 服务器，简写：devServer       |
| loaders             | webpack 可以使用 [loader](https://www.webpackjs.com/concepts/loaders) 来预处理文件，<br />这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。 |
| style-loader        | 将模块的导出作为样式添加到 DOM 中                            |
| css-loader          | 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码         |
| html-loader         | 导出 HTML 为字符串，需要引用静态资源                         |
| html-webpack-plugin | 该插件将为你生成一个 HTML5 文件， 其中包括使用 `script` 标签的 body 中的所有 webpack 包 |
| babel-loader        | 加载 ES2015+ 代码，然后使用 [Babel](https://babeljs.io/) 转译为 ES5 |
| @babel/core         | 进行转码的核心npm包                                          |
| @babel/preset-react | 对react语法的转换                                            |
| 参考：              | https://babeljs.io/                                          |

#### 开发依赖

| 名称             | 功能                  |
| ---------------- | --------------------- |
| react            | React 的核心库        |
| react-dom        | 提供与 DOM 相关的功能 |
| react-router-dom | React路由             |