Watch 1 Star 0 Fork 0

鸿基梦 / webpackJavaScript

Sign up for free
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
基于webpack的多页面应用,针对处理html的多页面应用, 旨在熟悉webpack打包,附录webpack打包笔记 相关概念总结:从基础入手到深入学习!!! spread retract

https://gitee.com/hjm100/webpack

Clone or download
Loading...
README.md

webpack打包插件封装

想要做一个什么样的事情

  1. 使用webpack来打包项目:

    1. 压缩html、压缩js、压缩css,压缩图片,
    2. 编译es6
    3. 打包scss,添加css预处理语言
    4. 打包图片文件、第三方插件、字体图标
    5. 添加热加载
    6. 兼容多页面与单页面
  2. 主要是想搭建一个优秀的打包插件

    1. 旨在练习webpack打包
    2. 拥有一个快速搭建高品质多页面产品站的打包组件
    3. 发布成为自己的npm包
  3. 开放必要接口给使用者(待开发...)

    1. 通过外部创建hjm.webpack.config.js 配置
      1. 打包输出文件路径
      2. 端口号配置

安装模块解析

  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)

Comments ( 0 )

You need to Sign in for post a comment

Help Search

183227_9af5e6a8_1826025 111910_4d91f001_1826025