webpack 教程 那些事儿06-gulp+webpack多页

本篇主要讲述用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] })

 

更多优化点，问度娘。