本篇文章仿照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的更多相关文章

  1. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

  2. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结和踩坑

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

  3. Vue ES6 Jade Scss Webpack Gulp

    一直以来非常庆幸曾经有翻过<代码大全2>:这使我崎岖编程之路少了很多不必要的坎坷.它在软件工艺的话题中有写到一篇:"首先是为人写程序,其次才是机器(Write Programs ...

  4. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  5. 基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...

  6. gulp+webpack+vue

    gulp+webpack+vue 章节目录 1.目标 2.实现 2.1合并库文件 2.2组织业务代码 2.3打包开发代码 2.4使用webpack-dev-server和热替换插件HotModuleR ...

  7. Vue ES6

    Vue ES6 Jade Scss Webpack Gulp   一直以来非常庆幸曾经有翻过<代码大全2>:这使我崎岖编程之路少了很多不必要的坎坷.它在软件工艺的话题中有写到一篇:“首先是 ...

  8. webpack + vue最佳实践

    webpack + vue最佳实践 我的原文地址:http://www.xiaoniuzai.cn/2016/10/04/webpack%20+%20vue%E6%9C%80%E4%BD%B3%E5% ...

  9. 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记【ThinkSNS+研发日记系列】

    在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 社群系统ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. L ...

随机推荐

  1. D3.js 使用缩放zoom时节点无法拖动,只能整体移动的问题

    .on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); }) https://stackover ...

  2. python进行进制转换

    # 10进制转为2进制 print(bin(10)) # 结果:0b1010 # 2进制转为10进制 print(int("1001", 2)) # 结果:9 # 10进制转为16 ...

  3. Jmeter中常用的一些对字符串的处理

    1)截取部分线程组的名称 group = ctx.getThreadGroup(); // 获取当前线程组 str = group.getName(); // 获取线程组的名称 str = str.s ...

  4. 多版本python安装第三方库

    1.先进入对应版本的python 2.使用命令安装:./pip install xxx

  5. docker 给none镜像打镜像

    1.遇到none的镜像打tag方式: docker  tag  + docker ID    + 命名:版本名 案例:docker  tag  41b7307026c0  gitlab:test 这就 ...

  6. 010-Python-socket编程

    客户端/服务器的架构 物理层:网卡,光缆,双绞线 数据链路层:包含源mac地址和目标的mac地址,通过广播通讯 网络层:跑的IP协议,IP地址可以定义到一个子网:通过ARP协议可以解析为mac地址: ...

  7. 金蝶开k3wise客户端访问中间层不时提示远程服务器不存在或不可用

    此问题一般是发生在WIN7客户端+中间层为WIN2008 R2系统,一般是中间层启用guest引起: a. 从Windows Vista以后, Negotiate (http://msdn.micro ...

  8. C++ ifstream ofstream

    原文出自[比特网],转载请保留原文链接:http://soft.chinabyte.com/database/460/11433960.sh [导读] ofstream是从内存到硬盘,ifstream ...

  9. tornado中form表单验证详解

    #!/usr/bin/env python# _*_ coding:utf-8 _*_import tornado.webimport tornado.ioloopimport re class Ba ...

  10. nginx的with-http_sub_module模块使用之替换字符串

    一.介绍 该ngx_http_sub_module模块是一个过滤器,通过将一个指定的字符串替换为另一个字符串来修改响应.该模块不是默认生成的,它应该使用--with-http_sub_module 配 ...