webpack 教程 那些事儿06-gulp+webpack多页
本篇主要讲述用gulp+webpack构建多页应用
折腾到现在,项目还必须要进行,.vue文件必须要加载,也就是webpack必须引入。
时间不多了,抛弃上个方案之后,只能牺牲热加载性能,用gulp+webpack构建。
文章目录
理论支持:沿用之前的gulp配置,唯一需要改变的是 之前用browserify打包js替换成webpack打包,想来也好像没什么问题的样子。
替换js打包方法
1
2
|
browserify -----> webpack
#增加一个 gulp task,没什么可说的
|
当然,程序没那么容易跑起来,换了一个打包方式,肯定各种文件资源路径不对等等各种报错,请自行根据具体Error具体解决。
项目优化(基于webpack)
程序可以正常启动以后,就要考虑优化的方式了,毕竟我们的初衷并不是仅仅换一个js的打包方式。
1. alias 还记得小李子的故事吗
2. 暴露全局变量
暴露常用插件到全局共用,比如vue,jquery等等,具体方式点参考之前讲述
3. 提取公共文件
1
2
3
4
5
|
new webpack.optimize.CommonsChunkPlugin({
name: "common",
filename: "js/common.js",
chunks: ['vue', 'jquery]
})
|
更多优化点,问度娘。
webpack 教程 那些事儿06-gulp+webpack多页的更多相关文章
- webpack 教程 那些事儿03-webpack两大精华插件,热加载
本节主要讲述 webpack的两大经典开发调试插件,热插拔内存缓存机制 文章目录 1. html-webpack-plugin插件的使用 2. webpack-dev-middleware 插件登场 ...
- [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...
- [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
- webpack 教程 那些事儿04-webpack项目实战分析
这节主要讲解真正项目用用到的 webpack配置问题,项目实战篇 就像我们不会完全做一个项目,不用别人的轮子一样.这个配置我们借用 vue-cli 搭建的配置来研究,因为它已经足够优秀. 有了前面的基 ...
- webpack 教程 那些事儿05-多页应用
本篇主要关于如何用webpack构建多页应用 为什么要构建多页应用呢?因为我的项目本来就是多页应用啊至于为什么要用webpack?因为我要用vue啊,嫌gulp 每次打包慢 啊 文章目录 1. 利用v ...
- webpack 教程 那些事儿01-webpack是什么
文章目录 1. 为什么引入webpack? 2. webpack到底是什么? 3. webpack的工作流程理念 4. webpack的使用 4.1. install webpack 5. 分享源码d ...
- webpack 教程 那些事儿02-从零开始
接着上篇我们有了最简单的安装了webpack的项目目录这节我们从零开始搭建一个简单的基于webpack的spa应用demo本节只说基础常用配置项,复杂后续讲解. 文章目录 1. 新建项目结构目录,如下 ...
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他 ...
- [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)
上文我们讲到了options的配置和获取数据的方式,本文,我们继续深入options的配置 一.html-webpack-plugin插件中的options除了自己定义了一些基本配置外,我们是可以任意 ...
随机推荐
- HDU5670Machine(抽象进制)
有一个机器,它有 m (2\leq m\leq 30)m(2≤m≤30) 个彩灯和一个按钮.每按下按钮时,最右边的彩灯会发生一次变换.变换为: 1. 如果当前状态为红色,它将变成绿色: 2.如果当前状 ...
- JavaWeb---总结(五)Http协议
一.什么是HTTP协议 HTTP是hypertext transfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的 ...
- CSS3的transition动画功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- GMap.NET使用一
https://greatmaps.codeplex.com/releases/view/20235 从上面网站下载需要的组件dll,也可以下载源码研究,解压后有两个文件夹,如图1所示,根据不同的fr ...
- Axure7.0汉化方法
下载汉化包 AxureRP7CN_汉化包.rar 首先退出正在运行中的 Axure (如果您正在使用). 将 汉化包.rar 文件解压, 得到 lang 文件夹, 然后将其复制到 Axure 安装目 ...
- Ubuntu下安装了java但启动eclipse报错说没装java
参考资料:http://blog.csdn.net/happyteafriends/article/details/8290950 一.问题 在Ubuntu下安装了java并在~/.bashrc配置了 ...
- 在Nginx服务器中设置多个站点
这里以配置1个站点(1个域名)为例,n 个站点可以相应增加调整, 假设:IP地址: 127.0.0.1域名1 phpmyadmin.zhengwen.cn 放在 /www/phpmyadmin.zhe ...
- Visual Studio无法查找或打开 PDB 文件解决办法
Visual Studio无法查找或打开 PDB 文件解决办法 用VS调试程序时,有时会在VS底部的“输出”框中提示“无法查找或打开 PDB 文件”.这该怎么解决呢? 下面,我们以VS2013为例,来 ...
- Orchard源码分析(4.1):Orchard.Environment.CollectionOrderModule类
CollectionOrderModule类是一个Autofac模块(Module,将一系列组件和相关的功能包装在一起),而非Orchard模块.其作用是保证多个注册到容器的组件能按FIFO(Firs ...
- 【转】flume+kafka+zookeeper 日志收集平台的搭建
from:https://my.oschina.net/jastme/blog/600573 flume+kafka+zookeeper 日志收集平台的搭建 收藏 jastme 发表于 10个月前 阅 ...