fontend-web/vue.config.js

'use strict';
const PageTitle = require('./title.config');

const path = require('path');

// glob 是 webpack 安装时依赖的一个第三方模块，该模块允许你使用 * 等符号,
// 例如 lib/*.js 就是获取 lib 文件夹下的所有 js 后缀名的文件
const glob = require('glob');

// const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');

/**
 * 多入口配置
 * 通过 glob 模块读取 pages 文件夹下的所有对应文件夹下的 js * 后缀文件，如果该文件存在
 * 那么就作为入口处理
 * */
function getEntries() {
  const pages = {};

  /** @type {Array} */
  const entries = glob.sync('./src/pages/**/*.app.js');
  entries.forEach(filePath => {
    // filePath: "./src/pages/index.app.js" ==> "/index.html"
    // filePath: "./src/pages/my/info.app.js" ==> "/my/info.html"
    // name: 'my/info'
    const name = filePath.split('./src/pages/')[1].split('.app.js')[0];
    const title = PageTitle.getPageTitleByPath(name);
    if (!title) {
      console.error(`[Multiple Entry]: "${name}" page has no matching title`);
    }

    pages[name] = {
      // page 的入口
      entry: filePath,
      // 模板来源
      template: 'public/index.html',

      // 在 `dist/` 文件夹的输出
      /* filename: `${name}.html`, */

      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: title || 'Coin Exchange',

      // 在这个页面中包含的块，设置为
      // 提取出来的通用 chunk 和 vendor chunk，加本身这个模块。
      chunks: ['chunk-vendors', 'chunk-common', 'chunk-element-ui', name],
    };

    // console.log(`[Multiple Entry]: ${name}`);
  });

  // console.log(JSON.stringify(pages, null, 2));
  return pages;
}

module.exports = {
  pages: getEntries(),
  configureWebpack: {
    plugins: [
      // // 注意一定要在HtmlWebpackPlugin之后引用
      // // inline 的name 要能筛选抽离出来的 runtimeChunk
      // new ScriptExtHtmlWebpackPlugin({
      //   // eg: runtime~my/info.a5c5787a.js
      //   // eg: runtime~index.c3f6d013.js
      //   inline: /runtime(?:~.+)?(?:\..+\.js)$/,
      // }),
    ],

    optimization: {
      // optimization.splitChunks
      // https://webpack.js.org/plugins/split-chunks-plugin#optimizationsplitchunks
      splitChunks: {
        maxInitialRequests: 6, //初始化最大请求数
        cacheGroups: {
          // element UI 单独打包
          elementUI: {
            chunks: 'all',
            name: 'chunk-element-ui',
            test: module => {
              /**
               * 因为用 scss 自定义了 element ui 样式，不从官方方直接导入样式，
               * 所以要将 `src/plugins/element.scss` 加入匹配
               */
              for (const chunk of module.chunksIterable) {
                if (!(chunk.name && module.nameForCondition)) {
                  continue;
                }

                /** @type string */
                const moduleName = module.nameForCondition();
                if (
                  moduleName.includes(path.join('node_modules/element-ui')) ||
                  moduleName.includes(path.join('src/plugins/element.scss'))
                ) {
                  return true;
                }
              }

              return false;
            },
            priority: 20,
          },

          // 第三方库
          vendors: {
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
            chunks: 'initial',
          },

          // chunk-common
          common: {
            name: 'chunk-common',
            minChunks: 4,
            priority: -20,
            chunks: 'initial',
            reuseExistingChunk: true,
          },

          // 测试用
          // 用于输出模块路径，便于测试
          // plugins: {
          //   name: 'chunk-custom-plugins',
          //   chunks: 'all',
          //   test: /[\\/]src[\\/]plugins[\\/]/,
          //   // test: module => {
          //   //   console.log('splitChunks.cacheGroups.plugins', module.context);
          //   //   return false;
          //   // },
          //   // minChunks: 3,
          //   priority: 10,
          // },
        },
      },

      // runtimeChunk: true,
    },
  },
};