本篇主要讲述用gulp+webpack构建多页应用

折腾到现在,项目还必须要进行,.vue文件必须要加载,也就是webpack必须引入。
时间不多了,抛弃上个方案之后,只能牺牲热加载性能,用gulp+webpack构建。

文章目录

  1. 1. 替换js打包方法
  2. 2. 项目优化(基于webpack)
    1. 2.1. 1. alias 还记得小李子的故事吗
    2. 2.2. 2. 暴露全局变量
    3. 2.3. 3. 提取公共文件
    4. 2.4. 更多优化点,问度娘。

理论支持:沿用之前的gulp配置,唯一需要改变的是 之前用browserify打包js替换成webpack打包,想来也好像没什么问题的样子。

替换js打包方法

1
2
browserify -----> webpack
#增加一个 gulp task,没什么可说的

当然,程序没那么容易跑起来,换了一个打包方式,肯定各种文件资源路径不对等等各种报错,请自行根据具体Error具体解决。

项目优化(基于webpack)

程序可以正常启动以后,就要考虑优化的方式了,毕竟我们的初衷并不是仅仅换一个js的打包方式。

1. alias 还记得小李子的故事吗

2. 暴露全局变量

暴露常用插件到全局共用,比如vue,jquery等等,具体方式点参考之前讲述

3. 提取公共文件

调用webpack内置插件功能 点击查看

1
2
3
4
5
new webpack.optimize.CommonsChunkPlugin({
name: "common",
filename: "js/common.js",
chunks: ['vue', 'jquery]
})

更多优化点,问度娘。

webpack 教程 那些事儿06-gulp+webpack多页的更多相关文章

  1. webpack 教程 那些事儿03-webpack两大精华插件,热加载

    本节主要讲述 webpack的两大经典开发调试插件,热插拔内存缓存机制 文章目录 1. html-webpack-plugin插件的使用 2. webpack-dev-middleware 插件登场 ...

  2. [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

    本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...

  3. [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)

    [js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...

  4. webpack 教程 那些事儿04-webpack项目实战分析

    这节主要讲解真正项目用用到的 webpack配置问题,项目实战篇 就像我们不会完全做一个项目,不用别人的轮子一样.这个配置我们借用 vue-cli 搭建的配置来研究,因为它已经足够优秀. 有了前面的基 ...

  5. webpack 教程 那些事儿05-多页应用

    本篇主要关于如何用webpack构建多页应用 为什么要构建多页应用呢?因为我的项目本来就是多页应用啊至于为什么要用webpack?因为我要用vue啊,嫌gulp 每次打包慢 啊 文章目录 1. 利用v ...

  6. webpack 教程 那些事儿01-webpack是什么

    文章目录 1. 为什么引入webpack? 2. webpack到底是什么? 3. webpack的工作流程理念 4. webpack的使用 4.1. install webpack 5. 分享源码d ...

  7. webpack 教程 那些事儿02-从零开始

    接着上篇我们有了最简单的安装了webpack的项目目录这节我们从零开始搭建一个简单的基于webpack的spa应用demo本节只说基础常用配置项,复杂后续讲解. 文章目录 1. 新建项目结构目录,如下 ...

  8. [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)

    上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他 ...

  9. [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)

    上文我们讲到了options的配置和获取数据的方式,本文,我们继续深入options的配置 一.html-webpack-plugin插件中的options除了自己定义了一些基本配置外,我们是可以任意 ...

随机推荐

  1. mysql_query()与mysql_real_query()

    mysql_query() cannot be used ” character, which mysql_query() interprets as the end of the statement ...

  2. easyUI数据表格datagrid之笔记2

    /**========================================= * 追加在表格尾部 */function append(){ editIndex = $('#dg').dat ...

  3. Spring MVC学习笔记——JSR303介绍及最佳实践

    JSR 303 – Bean Validation 是一个数据验证的规范,2009 年 11 月确定最终方案.2009 年 12 月 Java EE 6 发布,Bean Validation 作为一个 ...

  4. php-fpm服务挂掉

    今天发了个链接,可能同时在线的人瞬间比较多,结果网站报503错误,回去打开php-fpm错误日志一看,php-fpm服务挂掉了,报如下错误: [04-Apr-2016 15:38:04] NOTICE ...

  5. Docker学习笔记 — 配置国内免费registry mirror

    Docker学习笔记 — 配置国内免费registry mirror Docker学习笔记 — 配置国内免费registry mirror

  6. centos 7.0 安装vim

    用的最小化 安装 看看跟VI命令有何区别 后面会记录使用经验 [root@localhost conf]# yum -y install vim 已加载插件:fastestmirror base | ...

  7. Xunsearch 中文全文搜索

    原文地址:http://www.yiichina.com/code/661 官网地址:http://www.xunsearch.com/ 1.安装 wget http://www.xunsearch. ...

  8. YII2 自定义日志路径

    YII 提供的日志写入方法: 1.Yii::getLogger()->log($message, $level, $category = 'application') 2.Yii::trace( ...

  9. Mount挂载命令使用方法

    语法: mount -t 类型 -o 挂接方式 源路径 目标路径     -t 详细选项: 光盘或光盘镜像:iso9660 DOS fat16文件系统:msdos Windows 9x fat32文件 ...

  10. maven jar包库

    如果你的项目不是maven项目,比如ant,你的项目需要某些jar包的时候可以到maven 的jar包中心库下载 地址:http://search.maven.org/ http://mvnrepos ...