參考文章比較多
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...