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

LancerComet 發布于2019-08-23 10:34 / 1187人閱讀

摘要：修改為多入口編譯參考了這篇文章需求和出發點我們會有較多的小的單頁應用，主要是一些簡單的頁面和活動之類。甚至輸入顯然不存在的，也顯示為的內容。

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

date: 2018.07.31

參考了這篇文章

需求和出發點

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

對此，我們想到了兩種解決方案：

react-router 路由方案；

同一個項目的多入口編譯；

針對我們的業務需求，其實 react-router 方案會有兩個小問題：

單個活動的修改，其實需要編譯整個項目；

若是不做編譯優化，整個項目的包會比較大，但其實沒必要，當然這個可以通過 react-router 的按需加載來解決；

權衡之下，我們還是選擇了第二個方案——改造項目成為多入口編譯。

文件結構設計

改進后，整個項目的結構大體如下：

- project
    - build
    - config
    - public
    - scripts
    - src
        - api
        - component
        - site
            - site1
                - index.html
                - index.js
                - ...
            - site2
                - index.html
                - index.js
                - ...
    - package.json

site 文件夾下的所有文件夾都是一個獨立的項目，項目通用的代碼、資源被抽離到更外層的文件夾內，如 api、component 等，文件夾內都會有自己的 index.html 和 index.js，這會作為該項目的 html 模板和入口文件。下面，我們看下是如何修改編譯過程的。

修改入口和出口

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

入口修改

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

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

// 動態生成 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 以使靜態資源區分不同項目：

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 文件的輸出，其實是一個 HtmlWebpackPlugin，我們需要添加多個 HtmlWebpackPlugin，以求生成多個 HTML：

// 動態生成 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啟動后，發現無論輸入/index.html還是/admin.html，好像都是和原來/index.html顯示一樣的內容。甚至輸入顯然不存在的/xxxx.html，也顯示為/index.html的內容。

這里，我們還需要修改 /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,
    },
    ...
  };
};

OK，到這里，整個改造就完成了。

GPU云服務器云服務器修改jsp不自動編譯 create-react-app 字符串轉換為多位數的算法入口

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96471.html

react 應用多入口配置 && 實踐總結

摘要：如果不配置，則將所有的文件都注入。指明生成的路徑，如果不配置就是。配置了新的，避免與第一個入口相互覆蓋。甚至輸入顯然不存在的，也顯示為的內容。這種現象，初步判斷是服務器把所有請求重定向到了。至此，環境的多入口問題就解決了。前端根據自行配置。背景還是之前的那個項目，做完國際化沒多久，還沒來得及劃水，又有新的活了 -- 移動端的兼容。考慮到后期的復雜度，需要做兩套資源。具體的目...

Sike 2019-08-29 16:57 評論0 收藏0
react 應用多入口配置 && 實踐總結

摘要：如果不配置，則將所有的文件都注入。指明生成的路徑，如果不配置就是。配置了新的，避免與第一個入口相互覆蓋。甚至輸入顯然不存在的，也顯示為的內容。這種現象，初步判斷是服務器把所有請求重定向到了。至此，環境的多入口問題就解決了。前端根據自行配置。背景還是之前的那個項目，做完國際化沒多久，還沒來得及劃水，又有新的活了 -- 移動端的兼容。考慮到后期的復雜度，需要做兩套資源。具體的目...

curried 2019-08-23 12:20 評論0 收藏0
react+express項目

摘要：暴露所有內建配置，項目下會新增或對部分配置文件進行修改。開發環境開發時，前端項目和后端項目運行時端口端口不同，存在跨域問題。項目目錄結構優化項目目錄結構優化開發目錄主要是目錄，因此需要修改的目錄主要是目錄。 1 開發環境準備（windows） 1.1 安裝nodejs和npm 1) 下載nodejs安裝包：http://nodejs.org/en/download/ nodejs安...

Luosunce 2019-08-23 14:13 評論0 收藏0
初探react技術棧（一）

摘要：相信用的同學也不少找到函數在其中中添加啟用編譯。。。react 最近已經開始使用react技術棧了，從頭開始搭建項目，有必要的記錄一下配置的過程以及項目分層的思路，這次后臺項目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語言react-intl create-react-app 這是官方維護的腳手架應用我們一般也采用這個 $ npm or c...

劉玉平 2019-05-23 16:23 評論0 收藏0
初探React技術棧（一）

react 最近已經開始使用react技術棧了，從頭開始搭建項目，有必要的記錄一下配置的過程以及項目分層的思路，這次后臺項目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語言react-intl create-react-app 這是官方維護的腳手架應用我們一般也采用這個 $ npm or cnpm $ npm install create-react...

neroneroffy 2019-08-26 13:53 評論0 收藏0