IE 9+ 用户请转至:avalon-webpack-start
React 用户请转至:react-webpack-start
这个一个为打包支持到低版本的webpack2实验性脚手架。
本项目使用avalon2作为演示框架。
下面是非常!非常!!非常!!!重要的事情!!!
此项目无法在低版本IE下启动服务实时测试,必须通过打包才知道测试结果。
所以请用户自行在其他浏览器编写测试,最后回跑测试打包的IE
由于代码压缩导致无法在IE下正常运行,本版本取消代码压缩功能。如有使用如Jquery第三方库的同学,最好自行引用它的min版本,而不是通过打包形式。
确认好你的环境配置,然后就可以开始以下步骤。
$ git clone https://github.com/sayll/ie-webpack-start.git $ cd ie-webpack-start $ npm install # Install project dependencies $ npm start # Compile and launch如果一切顺利,就能正常打开端口:http://localhost:3000/
测试低版本IE的用户,通过npm run build,直接打开打包文件测试。
开发过程中,你用得最多的会是npm start。
但是这里还有很多其它的处理:
npm run <script> | 解释 |
|---|---|
start | 启动3000端口服务,代码热替换开启。 |
build | 单纯打包资源,不会进行代码测试。 |
deploy | 删除旧文件,进行代码测试,打包相关文件(默认目录~/build)。 |
test | 开启Karma测试并生成覆盖率报告。 |
visualizer | 打包资源分析 |
clean | 清除打包的文件 |
cnpm | 替换为淘宝镜像 |
- 开发使用
start - 调试IE使用
build - 发布使用
deploy
基本
高级
- 引用字体图标Icon【更多说明】
- 使用框架(avalon)或库(jquery)【更多说明】
- 设置全局变量。【更多说明】
- 使用Css预处理器(更多说明)
- 使用CDN(更多说明)
- 修改目录结构(更多说明)
- 单元测试(更多说明)
发布
- 打包说明【更多说明】
. ├── build # 所有打包配置项 ├── config # 项目配置文件 │ ├── webpack # webpack配置文件夹 │ └── karma.conf.js # karma配置文件 ├── server # Express 程序 (使用 webpack 中间件) │ └── main.js # 服务端程序入口文件 ├── app # 程序源文件 │ ├── html # 多页或单页应用的入口HTML │ └── source # 公共的资源文件 │ ├ ├── css │ ├ ├── js │ ├ ├── font │ ├ └── img │ ├── static # 公共的静态资源文件(所有内部文件通过index.js引入,可配置全局变量。) │ └── view # 主路由和异步分割点 │ └── index # 匹配html文件夹中的index.html。(css,js文件名对应文件夹名,可直接打包无需单独引入) │ ├── index.js # 直接与index.html匹配的入口文件,可以作为单页应用的入口,在内部定义自己的项目目录 │ ├── index.css # 如是多页应用,可设置对应的CSS文件,直接匹配。 │ └── other ** # 页面的其他资源文件,通过index.js引入 └── tests # 单元测试 - 亲不要吝啬自己的Star,先右上角Star一下呗!
