webpack多页面打包配置方案

多页面应用打包方案

 

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

• 单页面应用（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这样的，则会生成对应的目录结构。

如下：