基于 webpack 实现的多入口项目脚手架。
主要使用 extract-text-webpack-plugin 实现 js 、css 公共代码提取,html-webpack-plugin 实现 html 多入口,less-loader 实现 less 编译,postcss-loader 配置 autoprefixer 实现自动添加浏览器兼容前缀,删除~~html-withimg-loader 实现 html 内引入图片版本号添加和模板功能,~~art-template实现html模板功能,具有 layout 母模板(布局模板)功能更加强大、同时通过修改解析规则界定符支持浏览器端使用 art-template-web.js,babel-loader实现ES6 转码功能,imagemin实现图片优化压缩,happypack` 多线程加速构建速度。
npm install
npm start
| 命令 | 说明 |
|---|---|
npm run dev |
开发环境构建,不压缩代码 |
npm run build |
生产环境构建,压缩代码 |
项目同时用了
art-template-loader和art-template-web.js,默认情况下模板解析规则界定符会冲突,通过修改art-template-web.js解析界定符避免冲突。
// 修改 <% %> 为 <? ?> // @see http://aui.github.io/art-template/zh-cn/docs/rules.html var rule = template.defaults.rules[0]; rule.test = new RegExp(rule.test.source.replace('<%', '<\\\?').replace('%>', '\\\?>'));
与原始语法保持一致,仅需替换
<%为<?、%>为?>
import template from '../commons/template'; var data = { title: '用户列表', list: [ '001', '002', '003', '004', '005' ] }; var html = template('user-list', data); document.getElementById('wrapper').innerHTML = html;
<div id="wrapper"></div> <script id="user-list" type="text/html"> <h1><?= title ?></h1> <ul> <? for (var i =0; i < list.length; i++) { ?> <li><?= list[i] ?></li> <? } ?> </ul> </script>
├── dist # 构建后的目录
├── config # 项目配置文件
│ ├── webpack.config.js # webpack 配置文件
│ └── postcss.config.js # postcss 配置文件
├── src # 程序源文件
│ └── js # 入口
│ ├ └── index.js # 匹配 view/index.html
│ ├ └── user
│ ├ ├ ├── index.js # 匹配 view/user/index.html
│ ├ ├ ├── list.js # 匹配 view/user/list.html
│ ├ └── lib # JS 库等,不参与路由匹配
│ ├ ├── jquery.js
│ ├ └── commons # JS 公共模块等,不参与路由匹配
│ ├ ├── app-callphone.js
│ └── view
│ ├ └── index.html # 对应 js/index.js
│ ├ └── user
│ ├ ├── index.html # 对应 js/user/index.js
│ ├ ├── list.html # 对应 js/user/list.js
│ └── component # 组件
│ ├ └── dialog # Dialog 弹出层组件
│ ├ └── other
│ └── css # css 文件目录
│ ├ └── base.css
│ ├ └── iconfont.css
│ └── font # iconfont 文件目录
│ ├ └── iconfont.ttf
│ ├ └── iconfont.css
│ └── img # 图片文件目录
│ ├ └── pic1.jpg
│ ├ └── pic2.png
│ └── template # html 模板目录
│ └── layout.art # layout 母模板
│ └── head.art
│ └── foot.art
现象:
Module build failed: Error: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib
解决:
brew install libpng,详见:https://github.com/tcoopman/image-webpack-loader#libpng-issues