需求和出發點
我們會有較多的小的單頁應用，主要是一些簡單的頁面和活動之類。這些頁面相互之間沒有交集，但是會有一些可以共用的代碼，資源、接口、組件啥的。
對此，我們想到了兩種解決方案：
針對我們的業務需求，其實 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, '/'), }, ...} 另一部分是 plugin 的修改，webpack 中，每個 HTML 文件的輸出，其實是一個 HtmlWebpackPlugin，我們需要添加多個 HtmlWebpackPlugin，以求生成多個 HTML：
// 動態生成 pluginsconst 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，到這里，整個改造就完成了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
