webpack 教程那些事兒05-多頁應用

時間 2019-12-08

標籤 webpack 教程那些事兒多頁應用简体版

原文原文鏈接

本篇主要關於如何用webpack構建多頁應用
html

爲何要構建多頁應用呢？由於個人項目原本就是多頁應用啊
至於爲何要用webpack？由於我要用vue啊，嫌gulp 每次打包慢啊vue

文章目錄webpack

利用vue-cli的配置，擴展成多頁應用

想法老是簡單，實踐老是多坑。es6

理論支持：spa爲單頁，那麼我是否是輸出多個頁面就成了多頁呢？好像很對的樣子。
問題來了，如何才能輸出多個頁面，主意很容易打到 html處理插件 html-webpack-plugin上面。
單頁面輸出:web

5

 
     new HtmlWebpackPlugin({ 
    
     filename: 'index.html', 
    
      template: path. 
     resolve(__dirname, './app/views/index.html'), 
    
      inject: true 
    
      })

多頁面只須要多new 幾個HtmlWebpackPlugin就行了嘛
立刻實踐，果真能夠，✌️。那就動動吧！
興奮的修改配置以下:vue-cli

15

 
     # webpack.base.conf.js 
    
      entry: getEntry(), 
    
     //獲取js下面的全部輸出js,多頁面嘛 
    
     function getEntry() { 
    
     var jsPath = fs.readdirSync('./js/'); 
    
     var matchs = [],files = {}; 
    
      jsPath. 
     forEach(function(item) { 
    
      matchs = item.match(/(.+)\.js$/); 
    
     if (matchs) { 
    
      files[matchs[ 
     1]] = path.resolve('./js/', item); 
    
      } 
    
      }); 
    
     return files; 
    
      }

18

 
     # webpack.dev.conf.js 
    
     var baseWebpackConfig = require('./webpack.base.conf'); 
    
     var pages = function() { 
    
     var dir = fs.readdirSync(path.resolve(__dirname, '../views/')); 
    
     return dir.filter(function(name) { 
    
     return name.match(/\.html$/); 
    
      }); 
    
      }(); 
    
     for(var i = 0; i<pages.length; i++){ 
    
     var chunkname = pages[i]; 
    
     var conf = { 
    
      filename: chunkname, 
    
      template: path.resolve(__dirname, 
     '../views/'+chunkname), 
    
      inject: 
     false 
    
      } 
    
      baseWebpackConfig.plugins.push( 
     new HtmlWebpackPlugin(conf)); 
    
      }

想必聰明的你還記得我以前說過的 inject 這個參數吧
若是inject: true,那麼每一個頁面會注入entry中全部的js，因此配置爲false，js本身寫入npm

相對的,webpack.prod.conf.js也須要作相應配置。
至於其餘資源文件路徑什麼報錯問題，請自行解決，畢竟項目架構不一樣，錯誤也不盡相同。gulp

我也是吃了不少苦頭，排盡萬難，終於把以前用gulp搭建的項目轉換成webpack以後，並無興奮。
由於結果並不令我滿意，爲何呢？babel

gulp項目轉化成webpack以後的痛

項目大概二十多個頁面（就是.html文件），啓動項目須要一分鐘

啦啦啦
我在等一分鐘
或許下一分鐘
可以感受你也心痛
…
我想哭架構
尚未引入babel，引入babel轉碼以後，es6語法不生效
明明引入了babel轉碼，爲毛始終不生效，頭痛許久，查找到問題根源，
修改： include: ‘./js’ —-> include: 「/「
緣由未明
es6語法解決以後，打包更慢了，何止一分鐘。。。此次不單單想哭
雖然說整個項目用webpack打包，可是還有一些task必須依賴gulp完成，定製需求。