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

更新時(shí)間：2018年08月01日 09:26:24 作者：ShadowStorm

這篇文章主要介紹了create-react-app 修改為多入口編譯的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

需求和出發(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è)改造就完成了。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: