# webpack多页面脚手架

**Repository Path**: moonhx/webpack-multi-page-scaffold

## Basic Information

- **Project Name**: webpack多页面脚手架
- **Description**: 基于webpack5搭建的多页面脚手架，适用于小说，博客，论坛，官网等需要seo的网站。基本功能是有的，需要改进请自行扩展，本人暂时不维护。。。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 3
- **Created**: 2022-02-24
- **Last Updated**: 2023-06-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack-multi-pages

## 注意
本项目基于`webpack5`版本构建，如需查看修改参照`webpack5`官方文档

## 项目介绍
本项目是一个基于webpack架构的**web app**脚手架，其特点如下：
- 更适合多页应用。
- 既可实现全后端分离，也可以生成后端渲染所需要的模板。
- 引入component的概念，方便多页面间对布局、组件的重用。
- 编译后的js/css/图片文件采用hash值，不用担心换包还有浏览器缓存问题。
- 整合第三方js库，但其实换掉也很简单，或者干脆不用js库也行。
- 图片能正确引用不管是js还是css，亦或是html内，都可正常解析（这个问题困扰很久，因为webpack的版本问题，所以多看文档，webpack版本变化还是很大的）。

## 使用说明
- 本项目使用包管理工具NPM，因此需要先把本项目所依赖的包下载下来：
```
$ npm install
```

- 启动服务器，推荐直接使用webpack-dev-server
```
$ npm run start
```

- 理论上来说，webpack-dev-server会自动帮你打开浏览器并展示示例页面；如果没有的话，请手动打开浏览器，在地址栏里输入`http://localhost:8085`！

## CLI命令(npm scripts)
| 命令            | 作用&效果          |
| --------------- | ------------- |
| npm run build   | 根据`build/webpack.config.js`，build出一份生产环境的代码(未配置，现在可出的还是开发的包，但不影响，仍可放到服务器) |
| npm run start   | 根据`build/webpack.config.js`，开启webpack-dev-server并自动打开浏览器，自动监测源码变动并实现LiveReload，**推荐实际开发时使用此项** (注意这里使用devServer，开发的代码时在内存中的，看不到) |

## 目录结构说明
```
├─dist # 编译后生成的所有代码、资源（图片、字体等，虽然只是简单的从源目录迁移过来）
├─node_modules # 利用npm管理的所有包及其依赖
├─public # 静态资源，好像无用--后期会删除
├─babel.config.json # babel的配置文件，es6新语法解析转化
├─package.json # npm的配置文件
├─build # webpack配置
│   ├─generateEntry.js # 入口配置
│   ├─generateTemplate.js # 生成html模板，以及html模板配置
│   └─webpack.config.js # webpack详细配置
└─src # 当前项目的源码
    ├─assets # 静态资源，例如图片等
    ├─js # 这个目录很重要，每个html入口文件对应一个js，所有的js文件必须在这个目录，名称必须和入口文件的html同名，如果要改请修改对应的webpack配置
    │  ├─about.js # about.html 对应的js文件
    │  └─index.js # index.html 对应的js文件
    ├─style # 公共的style
    │  └─variables.less # 定义样式变量的文件，在less-loader全局配置，以便所有的less文件可以引用到
    └─views # 所有的页面和html组件
        ├─components # 公共的组件
        │  ├─header
        │  ├─footer
        │  └─...
        └─pages # 各个页面
           ├─index # 主页
           ├─about # 关于页面
           ├─about # 关于页面
           └─...
```

## 暂未完成
- 不能用npm管理的第三方库，这个很好集成，请自行集成，后面也会支持
- 其他的还没有想到，具体做项目时遇到问题后再补充


## 忠告
- 多看webpack文档

## 最后
- 本人暂无时间维护，需要优化请大佬们自行改进。。。