# html-webpack

**Repository Path**: dragon-li/html-webpack

## Basic Information

- **Project Name**: html-webpack
- **Description**: 这是一个关于静态网页的webpack模板，基于https://github.com/reng99/webpack修改的
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2018-10-18
- **Last Updated**: 2021-04-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 1. 项目介绍

这是一个使用webpack打包工具管理的HTML前端项目模板，使用原生的HTML、JavaScript，没有使用前端框架。   

CSS可以使用LESS、SCSS、CSS       

本人用这个模板写了好几个项目了。


## 2. 生成的项目注意

1. 项目生成的项目打包目录是`dist`，可在`webpack.base.config.js`文件里修改      



## 3. 本地开发

### 3.1 nodejs安装

项目本地开发需要nodejs环境，一般Mac电脑自带nodejs，如果没有，nodejs下载：http://nodejs.cn/download/

选择对应操作系统后安装。安装成功后终端运行如下命令查看是否安装成功：

```
➜  ~ node -v
v6.11.1
➜  ~ npm -v
6.0.1
```

如果显示了版本号则说明安装成功。

### 3.2 下载项目，安装依赖包

clone项目后， 终端打开项目，运行npm install安装项目的依赖包：

```
~ npm install
```

### 3.3 本地启动项目

依赖包安装好后，终端输入`npm start`启动服务:

```
~ npm start

Project is running at http://localhost:3000/
webpack output is served from /
```

稍等一会，服务会自动打开浏览器，查看效果。

如果没有打开浏览器，请手动在浏览器中打开`http://localhost:3000/`

本地服务启动后，即可在开发、修改代码，保存后可实时在页面查看效果。

## 4. 项目打包

终端输入`npm run build`开始打包生成项目:

```
~ npm run build

> webpack_project@1.0.0 build /Users/dragon/work/html-webpack
> webpack --config ./config/webpack.config.prod.js
.....
...
```

稍等一会，就会在项目的目录中看见一个dist文件夹，里面就是生成的项目

## 5. 一些文件介绍

### 5.1 .editorconfig

`EditorConfig`是一套用于统一代码格式的解决方案，很多项目都有用到，比如`Bootstrap`、`jQuery`、`Underscore`和`Ruby`等等。

官网：https://editorconfig.org/

有的编辑器需要插件才能应用这个设置，有的编辑器默认就应用这个设置了，比如vscode编辑器。