# webpack

**Repository Path**: hjm100/webpack

## Basic Information

- **Project Name**: webpack
- **Description**: 基于webpack的多页面应用，针对处理html的多页面应用，
旨在熟悉webpack打包，附录webpack打包笔记
相关概念总结：从基础入手到深入学习！！！
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/hjm100/webpack
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2018-01-12
- **Last Updated**: 2021-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack打包插件封装


## 想要做一个什么样的事情

1. 使用webpack来打包项目: 

   1. 压缩html、压缩js、压缩css,压缩图片,
   1. 编译es6
   1. 打包scss，添加css预处理语言
   1. 打包图片文件、第三方插件、字体图标
   1. 添加热加载
   1. 兼容多页面与单页面

1. 主要是想搭建一个优秀的打包插件
   
   1. 旨在练习webpack打包
   1. 拥有一个快速搭建高品质多页面产品站的打包组件
   1. 发布成为自己的npm包

1. 开放必要接口给使用者(待开发...)

   1. 通过外部创建hjm.webpack.config.js 配置
      1. 打包输出文件路径
      1. 端口号配置
      
## 安装模块解析

1. npm i -D anywhere                随时随地将你的当前目录变成一个静态文件服务器的根目录。
2. npm i -D webpack
3. npm i -D html-webpack-plugin     该插件将为你生成一个 HTML5 文件(打包多页面使用)
4. npm i -D html-loader             html加载器            

## 文件目录

```
.
├── dist                                          # 打包输出文件夹 
├── bin                                           # 服务器配置文件夹    
│   └── server.js                                   # express #服务器实例配置     
├── build                                         # webpack配置文件夹    
│   ├── filePath.js                                 # 文件路径   
│   ├── tool                                        # 封装的小工具  
│   │   └── getFile.js                                # 获取文件 
│   ├── webpack.config.base.js                      # webpack基础配置  
│   ├── webpack.config.dev.js                       # webpack 开发模式基础配置   
│   └── webpack.config.prod.js                      # webpack 生产模式基础配置 
├── config                                        # 项目设置
│   ├── index.js                                    # 打包配置文件（打包路径端口号） 
│   └── setting.js                                  # 项目设置（端口）           
├── web                                           # 前端项目根路径     
│   ├── data                                        # 静态数据      
│   │   └── data.json   
│   ├── assets                                      # 静态资源文件   
│   │   ├── 项目文件.text   
│   │   └── img                                       # 图片资源   
│   ├── script                                      # js模块   
│   │   ├── base                                      # js工具库 
│   │   │   ├── utils.js                                 # js方法(判断浏览器等)
│   │   │   └── base.js                                  # js引用初始化  
│   │   └── js                                        # 页面js模块引用文件   [需要与html名相互对应]
│   ├── css                                         # 样式       
│   │   ├── base                                      # 样式工具模块    
│   │   │   ├── _base.scss                              # 基础样式工具模块          
│   │   │   └── _reset.scss                             # 样式初始化    
│   │   └── css                                      # 页面css样式模块        
│   └── views                                        # 单页面文件夹           [不能有多个重名html]
├── .babelrc      
├── .gitignore      
├── postcss.config.js                               # css兼容前缀配置                       
├── package.json                                      
├── package-lock.json
├── skillReadme                                     # 技术说明文档 
└── README.md  

```

## 注意事项(待优化操作)

1. a标签跳转链接不支持打包效果（已修复--自定义loader）
2. 暂时不支持style标签中有背景图片引入(开发中)
3. （问题：图片打包后的文件名发生改变，并且小于3kb的图片打包为base64）