我知道我的回答有点晚了,但是为了以后的搜索,这是步骤:
- 弹出 (
yarn eject
)
- 编辑 paths.js 并在 appHtml 的入口下添加第二个入口 html 文件
请保留 HTML 标签。
appAdminHtml: resolveApp('public/admin.html'),
- 在
webpack.config.js
中更新条目,每个入口点包含一个条目。
entry: {
index: [
isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appIndexJs,
].filter(Boolean),
admin: [
isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appSrc + '/admin/index.js',
].filter(Boolean)
},
4. 将生成的输出JS文件更改为入口文件的名称(在
webpack.config.js
内)。
output: {
path: isEnvProduction ? paths.appBuild : undefined,
pathinfo: isEnvDevelopment,
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/[name].bundle.js',
futureEmitAssets: true,
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, '/')),
jsonpFunction: `webpackJsonp${appPackageJson.name}`,
globalObject: 'this',
},
- 更新插件以生成注入js脚本的第二个文件(也在
webpack.config.js
中)。
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
chunks: ['index'],
template: paths.appHtml,
filename: 'index.html'
},
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,
chunks: ['admin'],
template: paths.appAdminHtml,
filename: 'admin.html',
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
- 更新`webpack.config.js`中的`ManifestPlugin`配置,包括新的入口点:
new ManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: publicPath,
generate: (seed, files, entrypoints) => {
const manifestFiles = files.reduce((manifest, file) => {
manifest[file.name] = file.path;
return manifest;
}, seed);
let entrypointFiles = [];
for (let [entryFile, fileName] of Object.entries(entrypoints)) {
let notMapFiles = fileName.filter(fileName => !fileName.endsWith('.map'));
entrypointFiles = entrypointFiles.concat(notMapFiles);
};
return {
files: manifestFiles,
entrypoints: entrypointFiles,
};
},
}),
- 将您的服务器(开发和生产)更新以重写路径。
- 对于开发服务器,您需要更新
webpackDevServer.config.js
。
historyApiFallback: {
disableDotRule: true,
verbose: true,
rewrites: [
{ from: /^\/admin/, to: '/admin.html' },
]
},
由于生产服务器设置可能会有很大的不同,我会让你自己解决。
这篇文章更详细地描述了一切。
main
遇到了一些问题,rescripts给了我一个错误提示,但是我将其定义为虚拟/存根,并稍微调整了webpack配置,最终达到了我想要的结果。 - Alex