fwdragon-npm-test v2.0.0

一、前言

用于支持基础项目开发（即创建html、css、js的开发方式）

二、介绍

1. 当前支持的功能

HTML

• 为html中引入的css和图片添加版本号，根据css文件和图片改动自动更新版本号
• 引入ejs模板，支持组件复用，组件放置在src/pc(mobile)/tpl文件夹中
• 代码压缩格式化，具体配置看webpack.config.js文件

CSS

• 为css中引入的图片添加版本号，根据图片内容自动更新版本号
• 为样式添加兼容性前缀，可以在package.json文件中自行配置需要兼容的浏览器版本
• 代码压缩格式化，具体配置看postcss.config.js文件
• css文件使用styl后缀，支持stylus语法，如果不习惯可以采用传统css开发方式，两者语法可以同时存在

Image

• 自动合成雪碧图，将需要合成的图片放在src/pc(mobile)/images/sprite文件夹中，如果需要合成另外的雪碧图，自行新建文件夹，具体配置参考webpack.config.js文件
• 压缩图片，支持自动转换并引入webp格式
• 不需要压缩的图片放在src/pc(mobile)/images/hd文件夹中，比如：二维码......

JS

• 基于目前开发流程，js需要程序介入开发，所以暂时不对js进行处理，打包功能仅是拷贝一份

2. 待开发的功能

• 脚手架

三、使用教程

1. 创建项目文件，执行 npm i fwdragon-npm-test（仅需安装一次，后续开发直接跳到步骤3）
2. 查看 node_modules/fwdragon-npm-test 目录
3. 将该目录下的全部文件拷贝到自行创建的项目根目录下
4. 执行 npm i 命令
5. 安装完成后执行 npm run serve 命令启动开发环境
6. 开发完毕执行 npm run build 命令进行打包

注

• 当开启自动编译后，可以在命令行点击快捷键ctrl+C结束任务
• src为开发目录，dist为生成目录
• 更详细的教程和配置请查看思否|使用html-webpack-plugin对HTML文件进行预处理

四、版本更新

v1.0.6

• 整合了pc和mobile双端的打包流程，优点是在开发双端时可以只运行一次打包命令，缺点是双端项目较大时打包速度会比较慢

v2.0

• 【新增】webpack-dev-server
  • 用于开启HMR（模块热替换），在修改html、css、js后可以无需刷新浏览器即可看到修改的结果
• 【新增】webpack-merge
  • 用于区分开发环境和生产环境（由于引入了HMR，需要对开发和生产环境进行区分）
• 【新增】style-loader
  • 目前只有style-loader可以响应样式的热替换，mini-css-extract-plugin暂不支持
• 【新增】copy-webpack-plugin
  • 将js的开发文件直接复制到生产目录，这样在开发时可以监听js文件自动刷新
  • 用于支持webp图片生成
• 【新增】write-file-webpack-plugin
  • 以支持在开发前生成webp格式图片
• 【新增】imagemin-webp-webpack-plugin
  • 用来生成webp格式图片
• 【新增】ejs可以使用locals对象来保存参数（src/common/global.ejs），以供全局调用，方便双端修改文案时只需要修改一处
• 【更新】抽象了雪碧图函数，使得雪碧图配置更加方便
• 【更新】添加常用的js函数、stylus函数