webpack多页面入口配置一个工程里面既想有一个给用户看的前台页面，又想有一个给后台管理员看的后台管理页面，需要通过w

「这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战」

一个工程里面既想有一个给用户看的前台页面，又想有一个给后台管理员看的后台管理页面，需要通过webpack配置，把一个单页应用变成多页应用。为了能配置webpack，首先要将隐藏的配置暴露出来。传统使用npm run eject，但是eject操作是不可逆的。

配置

打开path.js文件，在module.exports中添加
```
adminHtml: resolveApp('public/admin.html'),
adminIndexJs: resolveModule(resolveApp, 'src/admin'),
```
注意与此同时，要先在public文件夹下创建admin.html，在src文件夹下创建admin.js

打开webpack.config.js文件，找到entry入口，添加新的admin入口

entry: {
   index: isEnvDevelopment && !shouldUseReactRefresh
     ? [
         webpackDevClientEntry,
         paths.appIndexJs,
       ]
     : paths.appIndexJs,
   admin: isEnvDevelopment && !shouldUseReactRefresh
   ? [
       webpackDevClientEntry,
       paths.adminIndexJs,
     ]
   : paths.adminIndexJs
 },

对打包出来的文件内容进行区分，修改output中的filename，在bundle.js前面加上[name]。比如入口是index.js，那么对应的打包文件就是index.bundle.js，好处是如果只访问前台页面，那么只会加载前台页面对应的index.bundle.js；如果访问的是anmin页面，那么只会加载admin.bundle.js。
```
filename: isEnvProduction
     ? 'static/js/[name].[contenthash:8].js'
     : isEnvDevelopment && 'static/js/[name].bundle.js',
```

修改HtmlWebpackPlugin插件。把js打包完成之后index页面对应的index.js文件插入到index.html模板里面，然后生成一个新的html，放到打包出来的dist目录下面名字叫做index.html这个文件里面。

 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.admainHtml,
       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
   )
 ),

删除ManifestPlugin

scripts目录下start.js, build.js增加paths.adminHtml, paths.adminIndexJs

if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs, paths.adminHtml, paths.adminIndexJs])) {
  process.exit(1);
}

优化

将public目录下admin.html与index.html统一为template.html模板，上述位置也要做出相应修改。