webpack多頁面方案

參考文章比較多

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多頁面方案

webpack多頁面打包

webpack配置多頁面專案

webpack多頁面打包配置

webpack多頁面方案

webpack多頁面打包

webpack配置多頁面專案

webpack多頁面打包配置

相關推薦