create-react-app 修改為多入口編譯

LancerComet 發(fā)布于2019-08-23 10:34 / 1240人閱讀

摘要：修改為多入口編譯參考了這篇文章需求和出發(fā)點(diǎn)我們會(huì)有較多的小的單頁應(yīng)用，主要是一些簡單的頁面和活動(dòng)之類。甚至輸入顯然不存在的，也顯示為的內(nèi)容。

create-react-app 修改為多入口編譯

date: 2018.07.31

參考了這篇文章

需求和出發(fā)點(diǎn)

我們會(huì)有較多的小的單頁應(yīng)用，主要是一些簡單的頁面和活動(dòng)之類。這些頁面相互之間沒有交集，但是會(huì)有一些可以共用的代碼，資源、接口、組件啥的。

對(duì)此，我們想到了兩種解決方案：

react-router 路由方案；

同一個(gè)項(xiàng)目的多入口編譯；

針對(duì)我們的業(yè)務(wù)需求，其實(shí) react-router 方案會(huì)有兩個(gè)小問題：

單個(gè)活動(dòng)的修改，其實(shí)需要編譯整個(gè)項(xiàng)目；

若是不做編譯優(yōu)化，整個(gè)項(xiàng)目的包會(huì)比較大，但其實(shí)沒必要，當(dāng)然這個(gè)可以通過 react-router 的按需加載來解決；

權(quán)衡之下，我們還是選擇了第二個(gè)方案——改造項(xiàng)目成為多入口編譯。

文件結(jié)構(gòu)設(shè)計(jì)

改進(jìn)后，整個(gè)項(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 文件夾下的所有文件夾都是一個(gè)獨(dú)立的項(xiàng)目，項(xiàng)目通用的代碼、資源被抽離到更外層的文件夾內(nèi)，如 api、component 等，文件夾內(nèi)都會(huì)有自己的 index.html 和 index.js，這會(huì)作為該項(xiàng)目的 html 模板和入口文件。下面，我們看下是如何修改編譯過程的。

修改入口和出口

編譯需要指定編譯的入口和輸出的位置，在 create-react-app 本來生成的 code 中，只有單入口和單出口，但是其實(shí) webpack 是支持多入口、多出口的。

入口修改

create-react-app 命令生成的 config 文件夾中，有個(gè) paths.js 文件，這里面 export 了比較常用的路徑。在這里，我對(duì) src/site 文件夾內(nèi)的文件夾進(jìn)行了遍歷，生成為對(duì)象。具體代碼如下：

// 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 屬性，將其修改為：

// 動(dòng)態(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 中，每個(gè) HTML 文件的輸出，其實(shí)是一個(gè) HtmlWebpackPlugin，我們需要添加多個(gè) HtmlWebpackPlugin，以求生成多個(gè) HTML：

// 動(dòng)態(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啟動(dòng)后，發(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,
      // 指明哪些路徑映射到哪個(gè)html
      rewrites: rewrites,
    },
    ...
  };
};

OK，到這里，整個(gè)改造就完成了。

GPU云服務(wù)器云服務(wù)器修改jsp不自動(dòng)編譯 create-react-app 字符串轉(zhuǎn)換為多位數(shù)的算法入口

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/96471.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

LancerComet

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

技術(shù)生涯記錄

閱讀 2664·2021-11-22 15:25
Database Mart：黑色星期五，最高達(dá)60%優(yōu)惠，美國vps，$3.99/月，GPU服務(wù)器$

閱讀 1525·2021-11-15 17:59
行業(yè)報(bào)告 | 2021.09.28 | 研報(bào)目錄更新

閱讀 1219·2021-09-29 09:34
ABAP開發(fā)知識(shí)點(diǎn)整理

閱讀 1671·2021-09-26 09:46
【如何構(gòu)建商業(yè)級(jí)別聊天系統(tǒng)】 MQTT 篇（四）MQTT 特性之持久會(huì)話、保留消息、遺囑

閱讀 3116·2021-09-02 15:40
前端培訓(xùn)-初級(jí)階段（9 -12）

閱讀 1272·2019-08-30 15:56
text-fill-color：仿蘋果官網(wǎng)介紹效果 CSS設(shè)置文字漸變效果文字背景圖遮罩

閱讀 3365·2019-08-30 15:55
2018你成長了么？一份給你的前端技術(shù)清單

閱讀 754·2019-08-29 17:08

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

create-react-app 修改為多入口編譯

相關(guān)文章

react 應(yīng)用多入口配置 && 實(shí)踐總結(jié)

react 應(yīng)用多入口配置 && 實(shí)踐總結(jié)

react+express項(xiàng)目

初探react技術(shù)棧（一）

初探React技術(shù)棧（一）

發(fā)表評(píng)論

0條評(píng)論

LancerComet

男|高級(jí)講師

TA的文章

技術(shù)生涯記錄

Database Mart：黑色星期五，最高達(dá)60%優(yōu)惠，美國vps，$3.99/月，GPU服務(wù)器$

行業(yè)報(bào)告 | 2021.09.28 | 研報(bào)目錄更新

ABAP開發(fā)知識(shí)點(diǎn)整理

【如何構(gòu)建商業(yè)級(jí)別聊天系統(tǒng)】 MQTT 篇（四）MQTT 特性之持久會(huì)話、保留消息、遺囑

前端培訓(xùn)-初級(jí)階段（9 -12）

text-fill-color：仿蘋果官網(wǎng)介紹效果 CSS設(shè)置文字漸變效果文字背景圖遮罩

2018你成長了么？一份給你的前端技術(shù)清單

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

create-react-app 修改為多入口編譯

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！