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 ...
随机推荐
- python并发编程之多线程2------------死锁与递归锁,信号量等
一.死锁现象与递归锁 进程也是有死锁的 所谓死锁: 是指两个或两个以上的进程或线程在执行过程中,因争夺资源而造成的一种互相等待的现象,若无外力作用, 它们都将无法推进下去.此时称系统处于死锁状态或系统 ...
- hdu4612 卡cin e-DCC缩点
/* 给定无向图,求加入一条边后最少剩下多少桥 */ #include<bits/stdc++.h> using namespace std; #define maxn 200005 #d ...
- Appium 如何模拟按键
from appium.webdriver import Remote driver.keyevent(4) python中点击返回键是这样写的 附录 keycode 电话键 KEYCODE_CALL ...
- VS和IIS的一些问题
运行所有MVC一直502,重启了iis服务, 之后弹出这个框: 之后的解决办法: 1. If you open the applicationhost,config file in VS while ...
- 饮冰三年-人工智能-Python-13Python基础之运算符与数据类型
1:算数运算符 + - * / ** % // 2: 成员运算符 in not in name = """张三""" if "张& ...
- 51 NOd 2006 飞行员配对(匈牙利算法二分匹配)
题目来源: 网络流24题 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 第二次世界大战时期,英国皇家空军从沦陷国征募了大量外籍飞行员.由皇家空军派出的每一 ...
- 一 time与datetime模块
时间戳(timestamp):通常来说,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量.我们运行“type(time.time())”,返回的是float类型. 格式化的时间字 ...
- 关于K8S证书生成方面的脚本草稿
周日在家里计划的. 俺不加班,但在家学习的时间一样没少! 还没弄完,只粗粗弄了etcd证书. #! /usr/bin/env bash set -e set -u set -x THIS_HOST=$ ...
- SpringBank 开发日志 使用maven构建dubbo服务的可执行jar包
写这篇日志的时候,我已经完成了这个目标,并且中间经历了一次面试.现在回过头看,已经觉得印象不那么深刻了,果然还是一边思考,一边记录这样最好.但我还是严格要求自己,从新做了梳理,对相关配置进行了整理和说 ...
- Directory 类
Directory 类 该类公开,主要用于创建.移动和枚举通过目录和子目录的静态方法.此类不能被继承. 命名空间: System.IO; 程序集: mscorlib(在 msc ...