webpack-avalon

安装相关步骤

1. 下载nodejs
2. 淘宝镜像设置(cmd)：npm config set registry https://registry.npm.taobao.org
3. 下载本DEMO
4. 安装该DEMO的包依赖

   • 全局安装(仅第一次安装时)

     • 安装包：npm install -g node-dev koa koa-router koa-static colors koa-webpack-dev-middleware koa-proxy gulp gulp-ejs gulp-csslint gulp-csso gulp-jshint gulp-uglify gulp-rename gulp-notify gulp-replace vinyl-buffer gulp-imagemin imagemin-pngquant merge-stream gulp.spritesmith del gulp-cssnano mockjs webpack extract-text-webpack-plugin text-loader url-loader style-loader css-loader less-loader sass-loader require-css-preloader autoprefixer-loader
     • 注意：因为网络原因node-sass可能会安装失败，失败后请修改node_modules/node-sass/lib/extensions.js里getBinaryUrl函数的返回值为 "return ['https://github.com/sass/node-sass/releases/download', sass.binaryName].join('/');"

   • 切换到项目(cmd)：npm link xxx(上面安装的除node-dev外的所有包)

   • 如果出现xxx不是可执行命令

     • 安装该插件到全局：npm install -g xxx
     • 设置环境变量：
       • 将"C:\Users\i\AppData\Roaming\npm"添加到你的环境变量PATH下
       • 注意：其中i表示你电脑用户名，需要根据你自己的名字变更

文件目录结构约定

• src/views：存放页面模块，并且每个模块必须有一个和模块同名的.html以及一个入口app.js
• src/components：存放通用模块（例如header/footer/common）
• src/vendor：存放第三方文件
• 为避免图片命名冲突，每个模块下的图片请使用模块名前缀，例如：index-img

名词解释

• 模块：每个模块下可包含自己的css/js/tpl/img等资源文件
• 模拟请求：需要在mock/定义数据，routes.js定义路由
• 别名配置：config.js下的alias
• 请求地址切换：config.js下curl

常用命令

• npm start：开启本地服务
• npm run watch：监控本地html和sprite图片合并
• npm run build：生成build文件
• npm run replace：build后压缩（生成.min文件和替换html的引用地址）
• npm run sprite：图片合并

使用说明

• 当开始一个项目时，首先在src/views下新建好模块

  • 例如：你有一个三个页面的项目，你需要建立(为避免重复，xxx.html必须和模块名一致)
  • src/views/page1/
    • page1.html # 需要引入common.js + page1.js + common.css + page1.css
    • app.js # require你本页的js和css
    • css/xx.css
    • js/xx.js
    • 详情参考示例里的mod模板页
  • page2 ...
  • page3 ...

• 如果你需要使用图片合并，请将需要合并的文件放在"img/sprite/"下

• 如果你需要使用ejs复用通用页面模板：<%- include mod.html %>

• 然后在命令行分别启动npm start和npm run watch，成功后可以开始开发了(注意需要先建好模块页面)

• 你可以直接在项目里使用，less或sass

• 建议使用chrome浏览器进行开发，并且安装livereload插件，你将不再需要F5