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

本篇文章給大家分享的是有關怎么將create-react-app 修改為多入口編譯，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

需求和出發點

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

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

• 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,
  },
  ...
 };
};

以上就是怎么將create-react-app 修改為多入口編譯，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。