# learn-webpack

**Repository Path**: cangeer/learn-webpack

## Basic Information

- **Project Name**: learn-webpack
- **Description**: 学习webpack的demo和总结
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-12
- **Last Updated**: 2022-06-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# README

## 文件目录

```
├── 总结
│   └── 高级篇-CLI的分析
│   └── 基础功能服务
│   └── 基础篇-资源打包
│   └── 中级篇-服务配置
│   └── 简介&开始
│   └── README.md
├── code-example
├── .gitignore
├── README.md
```



## 整个笔记构建流程
- 创建README.md
- git init
- cd code-example，npm init，开始webpack的构建之旅
- 总结里的内容和code-example的内容相互映射，为了间接package.json的配置，将node_modules放在上一层，和
目录同级，目录下再创建单个项目的package.json
## 为什么是webpack而不是gulp
[知乎 - gulp和webpack究竟有什么区别？](https://zhuanlan.zhihu.com/p/55869217)

一句话：webpack注重资源打包，gulp注重流水线化的task runner

## 如何学习webpack
学webpack应该学思想，而不是光看配置，需要不断的给自己提问：
如果在xxx场景下，我们该如何打包，多结合自身写过的项目，考虑项目中使用到的资源。


比如：
- 代码上线需要压缩怎么办？
- 代码打包之后如何方便调试
- 如何引入CDN开发，而不是npm包
- 如何集成工程化工具eslint、typescript？它是否太吃性能了，是否考虑添加husky

当你将一个个问题解决了，只是学的webpack能解决你的问题，而不是感觉什么都没学到，最后又忘了。

## 目标
- 基础打包方面：能够打包各种文件资源，包括SVG处理成所需组件
- 工程化方面：
  - 集成husky：
    - 提交commit 自动的检测代码
    - 自动发版，生成对应的版本更新MD文件
  - 主流框架
  - Eslint、TypeScript、StyleLint、Prettier
- Server方面：
  - Mock配置
  - Proxy代理

- webpack的打包优化
  - development(runtime) ：启动、更新
  - production：chunk更小、更少