摘要:可用编译低版本代码水有多深不得而知启动新技术提供测试框架进行单元测试,代码覆盖率报告,可与和快速对接。页面的其他资源文件,通过引入单元测试项目启动环境配置为了把保证项目正常运行,请自行更新相关环境。
项目地址:https://github.com/sayll/ie-webpack-start ie-webpack-start
IE 9+ 用户请转至:avalon-webpack-start
React 用户请转至:react-webpack-start
重要由于webpack不支持低版本IE下启动服务实时测试,必须通过打包才知道测试结果。
所以请用户自行在其他浏览器编写测试,最后回跑测试打包的IE
代码压缩导致无法兼容低版本IE,故取消代码压缩功能。
如有使用如Jquery第三方库的同学,最好自行引用它的min版本,而不是通过打包形式。(否则:反而使包变大)
本项目只是为用户提供使用ES6新特性的可能,和简单方便的管理资源。其他扩展功能不在本项目的范围内。
介绍
程序目录
项目启动
环境配置
依赖配置
命令说明
使用手册
基本
创建HTML视图
配置JS,CSS资源文件
高级
使用框架(avalon2)或库(jquery)
引用字体图标Icon
使用CSS预处理器、CDN或开启多文件路口main.js
修改目录结构
单元测试
发布
常见问题
更新日志
最重要的事情
介绍这个一个以webpack2为基础,启用tree-shaking新技术,为打包支持到低版本的webpack2实验性脚手架。
本项目使用avalon2作为演示框架。
服务端使用Express。需要注意的是,只有一个目的那就是提供了webpack-dev-middleware 和 webpack-hot-middleware(代码热替换)。使用自定义的Express程序替换webpack-dev-server,让它更容易实现universal 渲染和为了不使这个包过于庞大。
针对不同的loader采用了多线程编译,极大的加快了编译速度。
可用ES6编译低版本IE代码【水有多深不得而知】
启动新技术tree-shaking
提供测试框架进行单元测试,代码覆盖率报告,可与Travis-ci和Coveralls快速对接。【配置说明】
Babel被配置babel-plugin-transform-runtime可以让代码更优化。
关于【HTML】支持单页应用和多页应用的混合开发。
自动引入页面的CSS和JS文件。无需手动设置URL。(所有文件hash的改变都会导致文件名改变,这里的资源引用全由内部自动完成)
关于【CSS】css的模块化,预处理器的编译。(支持sass,scss,less,postcss)
针对低版本浏览器和其他浏览器内核的特殊性,启用autoprefixer自动添加浏览器前缀
可导入字体和字体图标,操作非常简单。(如阿里系icon)【配置文档】
防缓存的hash规则
关于【JS】支持ES5,ES6编写逻辑代码
由于兼容性问题只可使用AMD规范的require,无法使用 import 和 export
防缓存的hash规则
快速编译,自动刷新。
程序目录├── 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 # 单元测试项目启动 环境配置
为了把保证项目正常运行,请自行更新相关环境。
安装node.js
安装git
安装Yarn(可选)
依赖配置首先clone项目
$ git clone https://github.com/sayll/ie-webpack-start.git $ cd ie-webpack-start
由于国内有一堵高墙的存在建议国内用户切换源地址:
$ npm run cnpm
以后请使用cnpm替代npm操作
下载依赖
请确保你的环境配置完成,然后就可以开始以下步骤
npm 用户:
$ npm install # Install project dependencies $ npm start # Compile and launch
cnpm 用户:
$ cnpm install # Install project dependencies $ npm start # Compile and launch
Yarn 用户:
$ yarn # Install project dependencies $ yarn start # Compile and launch
如果一切顺利,就能正常打开端口:http://localhost:3000/
命令说明开发过程中,你用得最多的会是npm start,但是这里还有很多其它的处理:
npm run | 解释 |
---|---|
start | 启动3000端口服务,代码热替换开启。 |
build | 单纯打包资源,不会进行代码测试。 |
deploy | 删除旧文件,进行代码测试,打包相关文件(默认目录~/build)。 |
test | 开启Karma测试并生成覆盖率报告。(默认关闭:启动配置) |
visualizer | 打包资源分析 |
clean | 清除打包的文件 |
cnpm | 替换为淘宝镜像 |
开发使用 start
调试IE使用 build
发布使用deploy
更多详情...文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/86814.html
摘要:启动新技术提供测试框架进行单元测试,代码覆盖率报告,可与和快速对接。关于的模块化,预处理器的编译。页面的其他资源文件,通过引入单元测试日后调整,待开发使用手册流程基本位于创建视图更多说明主动引入的默认地址为位于配置相关的和文件。 webpack2-Scaffolding showImg(https://segmentfault.com/img/remote/14600000082840...
摘要:那时候所配置的任务监听匹配文件的变化自动刷新浏览器自动编译自动补全前缀多雪碧图合并拼图等等基于编译图片的任务,已经是完全满足我们的需求了。直至到后来在雪碧图的合并,多倍图的输出上,在上苦苦找寻不了比较完美的解决方案等等。 折腾 从 2015 到现在,短短的三年内,几乎每年折腾一下工作流的 更新换代 。从最早开始使用 Grunt 到 Gulp 再到 Webpack,再到 Rollup,...
摘要:名称后自动自动补全的功能将被移除在配置时,官方不再允许省略扩展名,的配置写法上将逐步趋于严谨。使用自定义参数作为配置项传入方式将做调整如果你随意将自定义参数通过传入到配置项中,如你会发现这将不会被允许,的执行将会遵循更为严格的标准。 历时多日,webpack2.2正式版终于赶在年前发布了,此次更新相对于1.X版本有了诸多的升级优化改进,笔者也在第一时间查阅了官方的文档,整理和翻译了由w...
摘要:重要特性枚举特性增加了对特性的支持。重要特性另一个就是基于静态模块分析仅支持标准写法。这样之后整体只能通过的方式。另外在使用过程中默认是将和转为所以需要关闭预设功能。这样做的目的就是为了项目工程化实现大项目的分工协作提高开发效率。 引言 这里是webpack official提供的一到二的升级指南,二兼容一的写法,给我的感觉是二的写法更规范,使用起来也比较简洁。 重要特性枚举 特性1 ...
摘要:但是此新标签在上并不能识别,需要进行处理。方式一如果是以下的浏览器将创建标签,这样非浏览器就会忽视这段代码,也就不会有无谓的请求了。 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单。 定义页面或区段的头部; 定义页面或区段的尾部; 定义页面或区段的导航区域; 页面的逻辑区域或内容组合; 定...
阅读 1632·2021-09-02 15:11
阅读 1970·2019-08-30 14:04
阅读 2556·2019-08-27 10:52
阅读 1573·2019-08-26 11:52
阅读 1193·2019-08-23 15:26
阅读 2611·2019-08-23 15:09
阅读 2601·2019-08-23 12:07
阅读 2229·2019-08-22 18:41