首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

Webpack 实战入门系列(三):生产配置、样式文件分离及输出清理

现在vue、react很流行,新项目基本用这些新框架,组件化开发确实是趋势,但是他们再怎么发展也离不开构建工具,顶多在webpack等工具上进行再封装。现在vuecli3出来后,我感觉学习成本反而变高了,直观感觉就是文档不清爽,知识零碎。其实回到本源,vuecli3就是基于webpack来的,而且webpack本身非常好学,可以由浅到深,逐步深入。你可以不用学vue、react,只要你会html+css+js就可以用上这个打包工具。很多人不懂webpack是因为一开始就没接触过,然后最先接触的反而是vue或者react框架,结果组件api已经学晕了,突然听说这个其实是webpack的东西,一下就更懵了,所以在不懂原理的情况下,别人的包装让你更加的迷茫。有些人只想会用就行,有些人是有点搞不懂的就想搞明白。那如果你是个前端,想搞清楚本质本源的东西,真的建议你学下webpack。就从这篇入门开始吧,一小时入门webpack

02

webpack优化解决项目体积大、打包时间长、刷新时间长问题!

在大家的日常开发中,特别是开发大型项目,大家有没有每次打包想要骂娘的冲动!反正我是很痛苦,每次打包20分钟起,这漫长的等待时间,让人非常焦虑,遇见一些特殊问题(比如测试微信分享),必须要打包部署,看效果,你会发现,一天时间全部浪费在打包上,真所谓改代码两分钟,打包代码两小时,于是闲暇之余,研究了一下webpck打包机制,并且通过几个小插件和一些技巧成功的减少公司项目的打包时间,虽然打包时间没有断崖式的减少,但是能少一分钟,是一分钟吧,下面我们一起来研究一下webpack的性能优化,以及体积优化!

04

前端基础建设之export、import使用

在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工具。 现在ES6自带了模块化, 也是JS第一次支持module, 在很久以后 ,我们可以直接作用import和export在浏览器中导入和导出各个模块了, 一个js文件代表一个js模块。 现代浏览器对模块(module)支持程度不同, 目前都是使用babelJS, 或者Traceur把ES6代码转化为兼容ES5版本的js代码。 ES6的模块化的基本规则或特点:  1:每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取。 一个模块就是一个单例,或者说就是一个对象;  2:每一个模块内声明的变量都是局部变量, 不会污染全局作用域;  3:模块内部的变量或者函数可以通过export导出;  4:一个模块可以导入别的模块 以上摘自(https://www.cnblogs.com/diligenceday/p/5503777.html)

04

ECSHOP学习笔记

1、根目录:前台程序文件 2、admin:后台程序文件夹    --根目录:后台程序文件  *.php文件    --help\zh_cn:各功能的帮助文件 *.xml文件    --images:后台页面用图片    --includes:后台公用文件和函数    --js:后台用js脚本    --styles:后台用样式表    --templates:后台页面模板  *.htm文件 3、api:调用API的系统公用函数 4、cert:存放证书的文件夹 5、data:数据连接设置等,包括各种广告的上传图片等    --afficheimg:首页flash广告图片    --brandlogo:品牌logo 6、images:上传商品图片文件夹,按日期分目录    --200902:按月份划分商品图片    --upload:上传文件夹,包括file、flash、image和media 7、includes:前台公用文件和函数    --codetable:语言对应的代码表    --fckeditor:开源html文本编辑器    --modules\convert:shopex转换文件    --modules\cron:如自动上下架、ip删除等函数    --modules\integrates:整合各种插件和函数基础类    --modules\payment:各种支付接口插件    --modules\shipping:各种送货方式插件 8、install:系统安装文件夹,用后请删除 9、js:前台用js脚本    --calendar:日历控件 10、languages:语言文件    --zh_cn:简体中文语言文件,存储简体中文下使用的函数变量等    --zh_tw:繁体中文语言文件,存储繁体中文下使用的函数变量等 11、temp:存放临时缓存等文件 12、themes:模板文件夹,可以随意拷贝模板样式 13、wap:手机浏览程序    --includes;公用文件和函数    --templates:页面模板  *.wml文件。

05
领券