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] })

 

更多优化点，问度娘。