webpack多頁面方案

2021-09-11 22:19:01 字數 1653 閱讀 5112

參考文章比較多

react-loadable + import()

這個方案需要@babel/plugin-syntax-dynamic-import的支援,記得修改babelrc。一般用這個方案的話是要用react-router來寫乙個單頁應用,模板載入乙個入口js,入口js裡把頁面路由寫好,每個頁面作為乙個元件,然後寫乙個類似這樣的結構

import loadable from 'react-loadable';

const routearr = [

) },

) }

]// 其他部分省略了

render() )}

);}

這個方案的問題在於,/* webpackchunkname: "page2" */這個注釋,這個注釋不加,動態import是不生效的,即使生效,也不能通過寫乙個迴圈來把所有的頁面元件都迴圈import,也就是說,每新增乙個頁面元件,就要自己往routearr裡加一段**,當然可以通過別的方式來生成這個routearr,比如寫檔案方式,根本問題就是routearr要以硬編碼形式存在,而不能是這樣的

const routearr = ['page1', 'page2'].map((v, k)=>`,

component: loadable(`),

loading: loading...

})};

})

這個方案的優點在於,1.不需要多個html模板,是個標準的單頁應用;2.不需要多個html-webpack-plugin例項;3.工程路徑可以隨意,只要寫到路由陣列裡的時候自己確定是對的就可以,不需要統一,但是作為乙個工程當然是統一為好;4.寫一些頁面共有的元件,比如選單,頂部導航等比較簡單

webpack的入口配置這樣寫

entry: ,

output:

html-webpack-plugin外掛程式這樣來寫

const htmlwebpackplugin = require("html-webpack-plugin");

plugins: [

new htmlwebpackplugin(),

chunks: ["page1"]

}),new htmlwebpackplugin(),

chunks: ["page2"]

})]

注意建立htmlwebpackplugin例項時的chunks選項,這個選項如果不寫,缺省會把entry裡生成的所有檔案全部注入到每個htmlwebpackplugin例項裡去,為了出這個坑我看了好多篇文章

這個方案的優點在於,不用每次手寫新增的頁面的名稱和路由(對比方案1),只要按照約定的工程目錄建立頁面,就可以通過遍歷目錄生成入口和htmlwebpackplugin例項來打包,缺點是頁面多的情況下htmlwebpackplugin例項也很多,應該會影響效能,並且如果要寫一些頁面上都有的元件(比如選單和導航),就要在每個頁面裡自己引用

如果覺得多個html-webpack-plugin例項的方式不靠譜,可以把方案2改改,還是配多個entry,工程目錄也一樣,然後自己寫乙個路由,根據當前載入的url來判斷載入哪個js,這樣其實就和方案1很類似了,這個路由寫在服務端會比較好,可以提前設定好js的鏈結,也可以實現頁面許可權之類的需求

webpack多頁面打包

在src下新建多個js檔案和html模板 在entry裡配置多個入口檔案 entry htmlwebpackplugin裡配置不同的html頁面引用不同的js檔案 const plugins new htmlwebpackplugin new htmlwebpackplugin 但是每次在 entr...

webpack配置多頁面專案

相信經常使用webpack的人已經深刻體驗到自動化工具給我們帶來的便利。我自己最常用的是vue,平時就是使用vue cli或者nuxt構建的專案,聰明的前輩已經為我們配好了專案,可以讓我們不必去配置就可以輕鬆使用。我現在做的這個專案只有簡單的兩個頁面,不基於任何框架。about.html,conta...

webpack多頁面打包配置

有幾個頁面其實就可以new幾個htmlwebpackplugin物件放到記憶體中去 webpack.common.js const plugins htmlwebpackplugin會在打包結束後,自動生成乙個html檔案,並把打包生成的js自動引入到這個html檔案中 newhtmlwebpack...