1.0.4 • Published 5 years ago
webfont.h5.js v1.0.4
h5-webpack 单页配置
一般用来开发简单的单页(活动页)配置,用 ts 代替 js,用 sass 代替 css,配置了开发和打包生产两种模式。
开发模式:不会有任何文件生成。
生产模式:在此文件同级目录打包出 test(测试环境)/prod(生产环境) 文件夹,最终要上传到生产服务器的静态文件。
命令
安装
npm install
// 推荐使用
cnpm install
开发 / 启动项目:
npm start
预设了 4 个环境,process.env.NODE_ENV 对应的环境值分别是:
- development 开发
- test 测试
- prodction 生产/正式
打包各种环境:
# 开发
npm run build:dev
# 测试
npm run build:test
# 生产/正式
npm run build:prod
打包完后预览项目:
# 预览打包好的【测试】环境静态文件
npm run preview:test
# 预览打包好的【正式】环境静态文件
npm run preview:prod
打包完后直接上传到 ftp(测试环境):
注:目前只添加上传到测试环境的命令,待详细测试之后添加上传正式环境的命令
# 打包【测试】环境静态文件,然后直接上传到测试环境 ftp
npm run upload:test
目录结构描述
├── config # webpack 配置(新增seo和上传配置)
├── prod/test/dev # 打包后的静态文件(打包成功后才会出现)
├── node_modules # 项目依赖包(需要安装)
├── src # 开发目录
│ ├── images # 图片文件
│ ├── sass # scss 样式文件
│ ├── ts # ts 文件
│ ├── vendor # 第三方库或工具
│ ├── index.d.ts # 声明文件
│ ├── favicon.ico # 网站图标
│ └── index.html # 单页模版
├── .gitignore # 不提交到 git 的文件
├── package.json # 项目说明文件
├── postcss.config.js # postcss 配置文件
├── README.md # 此文件
├── tsconfig # ts 配置文件
└── tslint.json # ts 编码规范文件
prod/test(打包后的文件夹)
├── css
├── images
├── js
├── favicon.ico
└── index.html
存在问题
- css 背景图打包后的路径错误,待解决。