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

為什么要構建多頁應用呢？因為我的項目本來就是多頁應用啊
至于為什么要用webpack？因為我要用vue啊，嫌gulp 每次打包慢 啊

?

文章目錄

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

2.?gulp項目轉化成webpack之后的痛

3.?拋棄webpack多頁應用配置

4.?下篇基于webpack的多頁應用新方案

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

想法總是簡單，實踐總是多坑。

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

1 2 3 4 5

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

?

多頁面只需要多new 幾個HtmlWebpackPlugin就好了嘛
馬上實踐，果然可以，??。那就動動吧！
興奮的修改配置如下:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 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; }

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 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 這個參數(shù)吧
如果inject: true,那么每個頁面會注入entry中所有的js，所以配置為false，js自己寫入

相對的,webpack.prod.conf.js也需要做相應配置。
至于其他資源文件路徑什么報錯問題，請自行解決，畢竟項目架構不同，錯誤也不盡相同。

我也是吃了很多苦頭，排盡萬難，終于把之前用gulp搭建的項目轉換成webpack之后，并沒有興奮。
因為結果并不令我滿意，為什么呢？

gulp項目轉化成webpack之后的痛

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

  啦啦啦
  我在等一分鐘
  或許下一分鐘
  能夠感覺你也心痛
  …
  我想哭

• 還沒有引入babel，引入babel轉碼之后，es6語法不生效
  明明引入了babel轉碼，為毛始終不生效，頭痛許久，查找到問題根源，
  修改： include: ‘./js’ —-> include: “/“
  原因未明

• es6語法解決之后，打包更慢了，何止一分鐘。。。這次不僅僅想哭

• 雖說整個項目用webpack打包，但是還有一些task必須依賴gulp完成，定制需求。

拋棄webpack多頁應用配置

因為坑太多，太慢，太痛，太捉急，等等。至此擱筆，果斷拋棄此方案！

下篇基于webpack的多頁應用新方案

轉載于:https://www.cnblogs.com/donglegend/p/5821108.html

總結

以上是生活随笔為你收集整理的webpack 教程 那些事儿05-多页应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。