需求和出發點

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

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

針對我們的業務需求，其實 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 pathsfunction 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 屬性，將其修改為：

// 動態生成 entryconst 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, '/'), }, ...}