webpack+vue+es6+postcss
本篇文章仿照vue-cli生成的项目结构,自己重新搭建目录,写一个小demo进一步巩固单文件组件的知识,并且学习中间件。
一、要解决的问题
1、如果把webpack.config.js放进build文件夹,而不是裸放在项目根目录,如何让项目找到配置文件?
方案A:中间件
写一个dev-server.js,里面指定配置文件webpack.dev.config.js,并自动打开浏览器。在package.json中设置命令行,npm run server,即可运行项目。
方案B:devServer
在package.json中设置命令行,npm run server,即可运行项目。遇到一个匪夷所思的问题,输出的publicPath字段值不能是其他相对路径或绝对路径,只能是'/',否则页面就是空白,既不引用内存中的js文件,也不报错!花了半天排查,天哪!
2、前面的基础学习,index.html都是手动引入bundle.js的文件,可不可以在页面加载的时候,自动载入呢?
这涉及html-webpack-plugin插件,下面会讲到。
二、webpack-dev-server和webpack-dev-middleware
前面的学习都用的是webpack-dev-server,本篇文章将放弃使用webpack-dev-server,换用webpack-dev-middleware。他们都是devtools,可以避免每次写到硬盘里,可以从内存读取文件,效率高。到底有什么区别呢?请看下文。
1、webpack-dev-server
它是一个静态资源服务器,只用于开发环境。它是一个小型Express服务器,webpack-dev-server会把编译后的静态文件全部保存在内存里。webpack-dev-server就是Express和webpack-dev-middleware的封装
,只有config和命令行参数可以配置,做定制型的开发比较困难,所以它属于纯前端的辅助工具。
2、webpack-dev-middleware
它是一个处理静态资源的middleware,需要结合webpack-hot-middleware使用,webpack-hot-middleware可以实现浏览器的无刷新更新。webpack-dev-middleware是一个中间件,可以编写自己的后端服务,然后整合进来,可扩展性比较大。
webpack-dev-middleware的作用是生成一个与webpack的compiler绑定的中间件,然后在express启动的服务app中调用这个中间件。配置文件中的publicPath字段可以指定内存中的文件路径。
有两种编译模式,正常模式和lazy模式。正常模式是内容改变后就编译,lazy模式是浏览器请求时编译。
三、涉及的插件
1、express
基于node的web应用开发框架。
2、webpack-dev-middleware
3、webpack-hot-middleware
4、http-proxy-middleware
单线程node.js代理中间件,用于连接,快速和浏览器同步。
5、opn
用于打开网址,文件,可以跨平台。
6、portfinder
7、html-webpack-plugin
它会自动帮你生成一个html文件,并且引用相关的assets文件(如 css, js)。
8、friendly-errors-webpack-plugin
构建项目时,在命令行就能看到运行的错误。
9、axios
返回promise,可以异步获取服务器数据。
webpack+vue+es6+postcss的更多相关文章
- Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结
本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...
- Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结和踩坑
本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...
- Vue ES6 Jade Scss Webpack Gulp
一直以来非常庆幸曾经有翻过<代码大全2>:这使我崎岖编程之路少了很多不必要的坎坷.它在软件工艺的话题中有写到一篇:"首先是为人写程序,其次才是机器(Write Programs ...
- 做一个gulp+webpack+vue的单页应用开发架子
1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
- 基于 Webpack & Vue & Vue-Router 的 SPA 初体验
基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...
- gulp+webpack+vue
gulp+webpack+vue 章节目录 1.目标 2.实现 2.1合并库文件 2.2组织业务代码 2.3打包开发代码 2.4使用webpack-dev-server和热替换插件HotModuleR ...
- Vue ES6
Vue ES6 Jade Scss Webpack Gulp 一直以来非常庆幸曾经有翻过<代码大全2>:这使我崎岖编程之路少了很多不必要的坎坷.它在软件工艺的话题中有写到一篇:“首先是 ...
- webpack + vue最佳实践
webpack + vue最佳实践 我的原文地址:http://www.xiaoniuzai.cn/2016/10/04/webpack%20+%20vue%E6%9C%80%E4%BD%B3%E5% ...
- 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记【ThinkSNS+研发日记系列】
在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 社群系统ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. L ...
随机推荐
- 左查询left join on简单总结
应用场景分析:(个人观点,欢迎小祖宗们指正补充) 适合存在父子关系的单表,以及多表的查询 话不多说上代码 代码:mapper里的sql 表名字段什么的本来是单独集中配置的,现在还原到sql中了 & ...
- 深入理解 Vue Computed 计算属性
Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...
- 数据结构c++实现代码-链表
/*节点Node的相关声明与定义*/ //Node.h #include<iostream> using namespace std; template<typename T> ...
- Mongodb for .Net Core 封装类库
一:引用的mongodb驱动文件版本为 Mongodb.Driver 20.4.3 二:我只是进行了常用方法的封装,如有不当之处,请联系我 创建mongodb的连接 using MongoDB.Bso ...
- Java基础知识➣环境搭建与类型整理(一)
概述 公司业务需要,产品既要有.NET又需要Java,没得选择,只能业余时间学习Java,整体觉得Java也.NET还是很相似的,只是语法有差别,差别也不是很大,这就将学习Java的基础知识整理下,以 ...
- P3403 跳楼机
题解: 据说是最短路经典题 考虑mod c一意义下 我们会发现mod c相同的话我们一定会用最少步数到达,剩余的都用c转移 由于转移图有环所以我们用spfa来dp(其实也可以理解成最短路) wa了好多 ...
- ubuntud安装Adobe Flash Player / Plugin
1.https://get.adobe.com/flashplayer/ , select tar.gz for other Linux, download 2.Unpack the tar.gz f ...
- Elasticsearch - Scroll
Scroll Version:6.1 英文原文地址:Scroll 当一个搜索请求返回单页结果时,可以使用 scroll API 检索体积大量(甚至全部)结果,这和在传统数据库中使用游标的方式非常相似. ...
- Hbase的写入负载均衡
在写Hbase的时候,会担心数据分布在各个region上不均匀(与预分区无关): 这个时候可能想到的方式:hash.加盐等(当然是可以的,但是读取的时候咋办呢? 哪天写一个这样的文章) 本文采用新方式 ...
- Zabbix监控Nginx性能状态
Nginx在生产环境中的应用越来越广泛,所以需要对nginx的性能状态做一些监控,从而发现故障隐患,Ngnx的监控指标可分为:基本活动指标,错误指标,性能指标 监控Nginx思路: 1)首先,要想监控 ...