【发布时间】：2019-03-22 22:36:27
【问题描述】：
我正在尝试构建一个具有 2 个入口点的 React 应用程序，一个用于应用程序，一个用于管理面板。
我从 Create React App V2 开始，并关注这个 gitHub 问题线程 https://github.com/facebook/create-react-app/issues/1084 和本教程 http://imshuai.com/create-react-app-multiple-entry-points/。
我正在尝试移植从 CRA V1 添加多个入口点以在 V2 中工作的说明，但我认为我遗漏了一些东西。
退出 CRA 后，这些是我更改/添加到 paths.js 的路径：
module.exports = {
appBuild: resolveApp('build/app'),
appPublic: resolveApp('public/app'),
appHtml: resolveApp('public/app/index.html'),
appIndexJs: resolveModule(resolveApp, 'src/app'),
appSrc: resolveApp('src'),
adminIndexJs: resolveModule(resolveApp, 'src/admin'),
adminSrc: resolveApp('src'),
adminPublic: resolveApp('public/admin'),
adminHtml: resolveApp('public/admin/index.html'),
};
我已将这些入口点添加到 webpack：
entry: {
app: [
isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appIndexJs,
].filter(Boolean),
admin: [
isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.adminIndexJs,
].filter(Boolean)
},
output: {
path: isEnvProduction ? paths.appBuild : undefined,
pathinfo: isEnvDevelopment,
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
chunkFilename: isEnvProduction
? 'static/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: isEnvProduction
? info =>
path
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/')
: isEnvDevelopment &&
(info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
},
我已经像这样修改了 HtmlWebpackPlugin：
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
filename: paths.appPublic,
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.adminHtml,
filename: paths.adminPublic,
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
并修改webpack Dev Server：
historyApiFallback: {
disableDotRule: true,
rewrites: [
{ from: /^\/admin.html/, to: '/build/admin/index.html' },
]
},
我的文件结构如下：
.
+-- _src
| +-- app.js
| +-- admin.js
| +-- _app
| +-- App.js
| +-- _admin
| +-- App.js
| +-- _shared
| +-- serviceWorker.js
+-- _public
| +-- _app
| +-- index.html
| +-- manifest.json
| +-- _admin
| +-- index.html
| +-- manifest.json
我希望我的 build 文件夹包含一个 app 文件夹和一个 admin 文件夹，其中包含 2 个单独的 SPA。
当我运行 yarn start 时，它不会抛出任何错误并显示 Compiled successfully! 但是它只是部分编译了应用程序而不是管理应用程序，也没有编译或添加到应用程序中。
yarn build 确实会抛出一个错误和一个半编译的应用程序，没有管理应用程序。这是错误：
yarn run v1.12.3
$ node scripts/build.js
Creating an optimized production build...
Failed to compile.
EISDIR: illegal operation on a directory, open
'foo/bar/public/app'
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
在它退出之前在构建文件夹中创建了很多：
.
+-- _static
| +-- _css
| +-- _js
| +-- _media
| +-- logo.5d5d9eef.svg
+-- precache-manifest.a9c066d088142837bfe429bd3779ebfa.js
+-- service-worker.js
+-- asset-manifest.json
+-- manifest.json
有谁知道我错过了什么才能使其正常工作？
【问题讨论】：
标签： reactjs webpack create-react-app