首页 > 其他分享> 文章详细

webpack多页面打包配置方案

2021-04-04 11:33:59 阅读：145 来源： 互联网

标签：index const src js webpack entry 打包页面

多页面应用打包方案

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

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。
多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新。

单页面的优点和缺点：

优点：

用户体验好，快，内容的改变不需要重新加载整个页面，对服务器压力较小。
前后端分离，比如vue项目
完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；

缺点：

首次加载页面的时候需要加载大量的静态资源，这个加载时间相对比较长。
不利于 SEO优化，单页页面，数据在前端渲染，就意味着没有 SEO。多页面应用有利于SEO
页面导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）

多页面应用优势：

页面之间解耦
有利于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这样的，则会生成对应的目录结构。

如下：
在这里插入图片描述

标签：index,const,src,js,webpack,entry,打包,页面
来源： https://blog.csdn.net/qq_41402809/article/details/115426626

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9