在大多數(shù)情況底下,我們只需要一個(gè)單頁應(yīng)用便可以順利的完成許多應(yīng)用場景.但是還是免不了有很多情況下我們需要通過多頁才能夠順利的完成任務(wù).
本篇文章就為大家講述如何快速優(yōu)雅的 生成多頁訪問.
1.增加入口文件
2.增加HtmlWebpackPlugin
注意:本文環(huán)境實(shí)在開發(fā)環(huán)境下配置,生產(chǎn)環(huán)境略有不同.稍微整改即可
注意:本文環(huán)境實(shí)在開發(fā)環(huán)境下配置,生產(chǎn)環(huán)境略有不同.稍微整改即可
注意:本文環(huán)境實(shí)在開發(fā)環(huán)境下配置,生產(chǎn)環(huán)境略有不同.稍微整改即可
1.增加入口文件
webpack.config.prod.js
//原生代碼
entry: [
//引入三個(gè)es6新特性
require.resolve('./polyfills'),
//載入熱更新
require.resolve('react-dev-utils/webpackHotDevClient'),
//入口文件
paths.appIndexJs,
],
這里entry是一個(gè)數(shù)組,不支持CommonsChunkPlugin .所以我們根具webpack官方文檔
https://webpack.js.org/concepts/entry-points/#multi-page-application
把entry改成一個(gè)對象.
此時(shí) 可以這樣子寫
entry:{
index:[
//引入三個(gè)es6新特性
require.resolve('./polyfills'),
//載入熱更新
require.resolve('react-dev-utils/webpackHotDevClient'),
//入口文件
path.resolve(paths.appSrc, "index/index.js")
],
admin:[
//引入三個(gè)es6新特性
require.resolve('./polyfills'),
//載入熱更新
require.resolve('react-dev-utils/webpackHotDevClient'),
//入口文件
path.resolve(paths.appSrc, "admin/index.js")
],
}
此時(shí)我們就成功載入了index和admin模塊
但是此時(shí)注意 因?yàn)槭窃陂_發(fā)模式底下 為了避免引入js沖突 的問題.
output中需要修改
//增加模塊名字和hash值 避免緩存 等等一切問題
filename: 'static/js/[name].[hash:8].bundle.js',
2.增加HtmlWebpackPlugin
webpack.config.prod.js
new HtmlWebpackPlugin({
inject: true,
chunks: ['index'],
template: paths.appHtml,
filename: "index/index.html"
}),
new HtmlWebpackPlugin({
inject: true,
chunks: ['admin'],
template: paths.appHtml,
filename: "admin/index.html"
}),
非常明確 到處兩個(gè)不同的index.html
配置到這里 npm start 發(fā)現(xiàn)還是有一點(diǎn)小問題,就是永遠(yuǎn)無法訪問到admin,google一翻之后,發(fā)現(xiàn)create-react-app幫我們做的太好了,為了支持react-router 這個(gè)本家的組件的在開發(fā)環(huán)境下的調(diào)試,已經(jīng)在配置文件中幫我們配置好了 可以直接訪問react router 路徑 訪問組件
其實(shí)就是支持historyApi,這點(diǎn)在我用剛?cè)腴Treact-router是給我了很大的疑惑,因?yàn)榫€上和開發(fā)環(huán)境是完全不同的.so....大廠給我們考慮的非常好,但是還是誤導(dǎo)了小白的我
ps:上面完全是我在瞎扯,官方原文鏈接在這里
原話鏈接:https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback
廢話說了一摞,說一下解決的方法.
修改webpackDevServer.config中的historyApiFallback為false(這樣子就無法直接訪問組件地址訪問組件了.完美的解決方式,請看官網(wǎng)即可)
修改webpackDevServer.config中的historyApiFallback為false(這樣子就無法直接訪問組件地址訪問組件了.完美的解決方式,請看官網(wǎng)即可)
修改webpackDevServer.config中的historyApiFallback為false(這樣子就無法直接訪問組件地址訪問組件了.完美的解決方式,請看官網(wǎng)即可)
生產(chǎn)環(huán)境下不用考慮這個(gè)問題
3.優(yōu)雅de
恩恩呢呢,如何更加優(yōu)雅得解決多頁訪問的問題呢...其實(shí)在第二章就講到了env.js的用處 這里 不多說 貼 幾行代碼大家自己理解一下 哈哈 (其實(shí) 是我要去洗澡了,再不洗澡沒惹誰了而且還好困,不想寫了,好困啊)
根目錄下 創(chuàng)建 .env.local
REACT_APP_ENTRY=["index","admin"]
回到webpack.config.dev
定義兩個(gè)函數(shù)
const env = getClientEnvironment(publicUrl);
function setEntryConfig(arrayString) {
let entryArray = JSON.parse(arrayString)
if (!Array.isArray(entryArray)) {
console.log("請確保entry是一個(gè)數(shù)組")
return {}
}
let entry = {}
entryArray.map(function (item) {
entry[item] = [
require.resolve("./polyfills"),
require.resolve('react-dev-utils/webpackHotDevClient'),
//合成入口文件
path.resolve(paths.appSrc, item + "/index.js")
]
})
return entry
}
function setHtmlPluginConfig(arrayString) {
let entryArray = JSON.parse(arrayString)
if (!Array.isArray(entryArray)) {
console.log("請確保entry是一個(gè)數(shù)組")
return []
}
let plugin = []
entryArray.map(function (item) {
plugin.push(
new HtmlWebpackPlugin({
inject: true,
chunks: [item],
template: paths.appHtml,
filename: item + "/index.html"
})
)
})
return plugin
}
然后應(yīng)用上
entry: setEntryConfig(env.raw.REACT_APP_ENTRY),
...(setHtmlPluginConfig(env.raw.REACT_APP_ENTRY)),
其實(shí)還能更加擴(kuò)展更加靈活...但是本寶寶要去洗澡了..以后再說吧
