建站
咨詢
售后
建站咨詢
新聞中心
本篇文章給大家分享的是有關(guān)怎么將create-react-app 修改為多入口編譯，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
我們提供的服務(wù)有：成都網(wǎng)站制作、網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、白城ssl等。為近1000家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的白城網(wǎng)站制作公司
需求和出發(fā)點(diǎn)
我們會有較多的小的單頁應(yīng)用，主要是一些簡單的頁面和活動之類。這些頁面相互之間沒有交集，但是會有一些可以共用的代碼，資源、接口、組件啥的。
對此，我們想到了兩種解決方案：
react-router 路由方案；
同一個項(xiàng)目的多入口編譯；
針對我們的業(yè)務(wù)需求，其實(shí) react-router 方案會有兩個小問題：
單個活動的修改，其實(shí)需要編譯整個項(xiàng)目；
若是不做編譯優(yōu)化，整個項(xiàng)目的包會比較大，但其實(shí)沒必要，當(dāng)然這個可以通過 react-router 的按需加載來解決；
權(quán)衡之下，我們還是選擇了第二個方案——改造項(xiàng)目成為多入口編譯。
文件結(jié)構(gòu)設(shè)計
改進(jìn)后，整個項(xiàng)目的結(jié)構(gòu)大體如下：
- project - build - config - public - scripts - src - api - component - site - site1 - index.html - index.js - ... - site2 - index.html - index.js - ... - package.json
site 文件夾下的所有文件夾都是一個獨(dú)立的項(xiàng)目，項(xiàng)目通用的代碼、資源被抽離到更外層的文件夾內(nèi)，如 api、component 等，文件夾內(nèi)都會有自己的 index.html 和 index.js，這會作為該項(xiàng)目的 html 模板和入口文件。下面，我們看下是如何修改編譯過程的。
修改入口和出口
編譯需要指定編譯的入口和輸出的位置，在 create-react-app 本來生成的 code 中，只有單入口和單出口，但是其實(shí) webpack 是支持多入口、多出口的。
入口修改
create-react-app 命令生成的 config 文件夾中，有個 paths.js 文件，這里面 export 了比較常用的路徑。在這里，我對 src/site 文件夾內(nèi)的文件夾進(jìn)行了遍歷，生成為對象。具體代碼如下：
// all site paths
function allSitePath(source) {
const { lstatSync, readdirSync } = fs
const { join } = path
const result = {}
const isDirectory = source => lstatSync(source).isDirectory()
readdirSync(source).map(name => {
let path = join(resolveApp(source), name)
if (isDirectory(path)) result[name] = path
})
return result
}
module.exports = {
...
allSites: allSitePath('src/site'),
}在 webpack.config.dev.js / webpack.config.prod.js 中找到 module.exports 的 entry 屬性，將其修改為：
// 動態(tài)生成 entry
const entry = {}
Object.keys(paths.allSites).forEach(item => {
entry[item] = [
require.resolve('./polyfills'),
require.resolve('react-dev-utils/webpackHotDevClient'),
require.resolve('react-error-overlay'),
paths.allSites[item]
]
})
module.exports = {
...
entry: entry,
...
}出口修改
出口的修改分為兩部分，一部分是 module.exports 的 output，添加 name 以使靜態(tài)資源區(qū)分不同項(xiàng)目：
module.exports = {
...
output: {
path: paths.appBuild,
pathinfo: true,
filename: 'static/js/[name].bundle.js',
chunkFilename: 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},
...
}另一部分是 plugin 的修改，webpack 中，每個 HTML 文件的輸出，其實(shí)是一個 HtmlWebpackPlugin，我們需要添加多個 HtmlWebpackPlugin，以求生成多個 HTML：
// 動態(tài)生成 plugins
const plugins = []
Object.keys(paths.allSites).forEach(item => {
plugins.push(new HtmlWebpackPlugin({
inject: true,
chunks: [item],
template: `${paths.allSites[item]}/index.html`,
filename: `${item}/index.html`,
}))
})
module.exports = {
...
plugins: [
...
].concat(plugins),
...
}修改 webpack Dev Server 配置
上述配置做完后，理論就可以打包出多入口的版本；但使用npm start啟動后，發(fā)現(xiàn)無論輸入/index.html還是/admin.html，好像都是和原來/index.html顯示一樣的內(nèi)容。甚至輸入顯然不存在的/xxxx.html，也顯示為/index.html的內(nèi)容。
這里，我們還需要修改 /config/webpackDevServer.config.js，做一些額外配置。
const rewrites = []
Object.keys(paths.allSites).forEach(item => {
rewrites.push({
from: new RegExp(`^\\/${item}/`, 'i'),
to: `/${item}/index.html`,
})
})
...
module.exports = function(proxy, allowedHost) {
return {
...
historyApiFallback: {
// Paths with dots should still use the history fallback.
// See https://github.com/facebookincubator/create-react-app/issues/387.
disableDotRule: true,
// 指明哪些路徑映射到哪個html
rewrites: rewrites,
},
...
};
};以上就是怎么將create-react-app 修改為多入口編譯，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)頁題目：怎么將create-react-app修改為多入口編譯
本文網(wǎng)址：http://fisionsoft.com.cn/article/jeoedd.html
