阅读 176

webpack多页面打包配置方案

这是我参与8月更文挑战的第7天,活动详情查看:8月更文挑战

多页面应用打包方案

 

先来说说什么是单页面应用和多页面应用:

  • 单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。

  • 多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新。

 

单页面的优点和缺点:

优点

  1. 用户体验好,快,内容的改变不需要重新加载整个页面,对服务器压力较小。

  2. 前后端分离,比如vue项目

  3. 完全的前端组件化,前端开发不再以页面为单位,更多地采用组件化的思想,代码结构和组织方式更加规范化,便于修改和调整;

缺点

  1. 首次加载页面的时候需要加载大量的静态资源,这个加载时间相对比较长。

  2. 不利于 SEO优化,单页页面,数据在前端渲染,就意味着没有 SEO。多页面应用有利于SEO

  3. 页面导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理)

 

多页面应用优势:

  1. 页面之间解耦
  2. 有利于SEO

   

多页面应用打包基本思路

每个页面对应一个entry,一个html-webpack-plugin 缺点:每次新增挥着删除页面都需要更改webpack配置 比如:

entry: {
  index:'./src/index.js',
  add:'./src/add.js'
},
复制代码

优化

可以过程序的思维,每次动态的获取某一个目录下面指定的入口文件(约定:所有目录都放在/src下面,每个页面的入口文件都约定为index.js比如 /src/index/index.js 或 /src/search/index.js) 项目目录在这里插入图片描述

可以使用 glob,用来匹配文件 在这里插入图片描述

配置如下

const setMPA = () => {
  const entry = {};
  const htmlWebpackPlugins = [];

  const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js'));

  Object.keys(entryFiles).map((index) => {
    // 拿到路径名
    const entryFile = entryFiles[index];
    // 匹配出文件名  /src 和 /  中间的内容
    // !!!! () 小括号表示分组
    const match = entryFile.match(/src\/(.*)\/index\.js/);
    const pageName = match && match[1];
    entry[pageName] = entryFile;

    htmlWebpackPlugins.push(
      // new 一次HtmlWebpackPlugin  就会生成一个html
      new HtmlWebpackPlugin({
        template: path.join(__dirname, `src/${pageName}/index.html`),
        filename: `${pageName}.html`,
        chunks: [pageName],
        inject: true,
        minify: {
          //移除空格
          collapseWhitespace: true,
          //移除注释
          removeComments: true,
        },
      }),
    );
    console.log(htmlWebpackPlugins);
  });
  return {
    entry,
    htmlWebpackPlugins,
  };
};
const { entry, htmlWebpackPlugins } = setMPA();
复制代码

打包结果如下

在这里插入图片描述

webpack打包后的目录是很乱的,如果你入口文件的名字取为search,那么会在dist目录下直接生成一个search.xxxxx.js的文件。但是如果把名字取为src/search/index这样的,则会生成对应的目录结构。

如下:

在这里插入图片描述

文章分类
前端
文章标签