阅读 88

webpack多页面入口配置

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

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

配置

  1. 打开path.js文件,在module.exports中添加

    adminHtml: resolveApp('public/admin.html'),
    adminIndexJs: resolveModule(resolveApp, 'src/admin'),
    复制代码

    注意与此同时,要先在public文件夹下创建admin.html,在src文件夹下创建admin.js

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

    entry: {
       index: isEnvDevelopment && !shouldUseReactRefresh
         ? [
             webpackDevClientEntry,
             paths.appIndexJs,
           ]
         : paths.appIndexJs,
       admin: isEnvDevelopment && !shouldUseReactRefresh
       ? [
           webpackDevClientEntry,
           paths.adminIndexJs,
         ]
       : paths.adminIndexJs
     },
    复制代码
  3. 对打包出来的文件内容进行区分,修改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',
    复制代码
  4. 修改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
       )
     ),
    复制代码
  5. 删除ManifestPlugin

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

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

优化

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

文章分类
前端
文章标签