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

 

更多優化點，問度娘。