多页面配置

目录结构

├── config
│   ├── webpack.config.js
│   ├── webpack-help.js
├── src
│   ├── api
│   ├── libs
│   ├── pages
│   ├── pages
│   │   ├── home
│   │   │   ├── home.html
│   │   │   ├── home.js
│   │   │   ├── home.css
│   ├── utils
│── package.json

config/webpack-help.js

const path = require('path');
const glob = require('glob');
const HtmlWebPackPlugin = require('html-webpack-plugin');

function getEntry() {
  var entryFiles = glob.sync('./pages/*/*.js', {
    cwd: path.join(__dirname, './src'),
  });
  var resultEntry = {};
  entryFiles.forEach((filePath) => {
    // // path.dirname() 返回 path 的目录名
    // // eg: path.dirname('/src/pages/home.html') --> '/src/pages'
    // const dirname = path.dirname(filePath);

    // path.extname() 返回 path 的扩展名，即 path 的最后一部分中从最后一次出现的 .（句点）字符到字符串的结尾。
    // eg: path.extname('/src/pages/home.html') --> '.html'
    const extname = path.extname(filePath);
    // path.basename() 返回 path 的最后一部分
    // eg: path.basename('/src/pages/home.html') --> 'home.html'
    // eg: path.basename('/src/pages/home.html', '.html') --> 'home'
    const basename = path.basename(filePath, extname);

    // // path.join() 方法使用特定于平台的分隔符作为定界符将所有给定的 path 片段连接在一起，然后规范化生成的路径。
    // // eg: path.join('/src', 'pages', 'home.html') --> '/src/pages/home.html'
    // let pathname = path.join(dirname, basename);

    resultEntry[basename] = filePath;
  });
  return resultEntry;
}

function getHtmlWebpackPlugins() {
  const entries = getEntry();
  return Object.keys(entries).reduce((plugins, filename) => {
    const filePath = entries[filename];
    const dirname = path.dirname(filePath);
    plugins.push(
      new HtmlWebPackPlugin({
        template: `${dirname}/${filename}.html`,
        filename: `${filename}.html`,
        inject: 'body', // js插入的位置。 true/'head'/'body'/false
        hash: true, // 为静态资源生成 hash 值
        chunks: ['vendors', filename],
        minify: {
          // 压缩HTML文件
          removeComments: true, // 移除HTML中的注释
          collapseWhitespace: false, // 删除空白符与换行符
        },
      })
    );
    return plugins;
  }, []);
}

module.exports = { getEntry, getHtmlWebpackPlugins };

::: detail webpack.config.js

const { getEntry, getHtmlWebpackPlugins } = require('./webpack-help.js');

module.exports = {
  mode: 'development',
  entry: getEntry(),
  optimization: {
    splitChunks: {
      chunks: 'async', // 三选一： "initial" | "all" | "async" (默认)
      minSize: 30000, // 最小尺寸，30K，development 下是 10k，越大那么单个文件越大，chunk 数就会变少（针对于提取公共 chunk 的时候，不管再大也不会把动态加载的模块合并到初始化模块中）当这个值很大的时候，就不会做公共部分的抽取了
      maxSize: 0, // 文件的最大尺寸，0 为不限制，优先级：maxInitialRequest/maxAsyncRequests < maxSize < minSize
      minChunks: 1, // 默认 1，被提取的一个模块至少需要在几个 chunk 中被引用，这个值越大，抽取出来的文件就越小
      maxAsyncRequests: 5, // 在做一次按需加载的时候最多有多少个异步请求，为 1 的时候就不会抽取公共 chunk 了
      maxInitialRequests: 3, // 针对一个 entry 做初始化模块分隔的时候的最大文件数，优先级高于 cacheGroup，所以为 1 的时候就不会抽取 initial common 了
      automaticNameDelimiter: '~', // 打包文件名分隔符
      name: true, // 拆分出来文件的名字，默认为 true，表示自动生成文件名，如果设置为固定的字符串那么所有的 chunk 都会被合并成一个
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/, // 正则规则，如果符合就提取 chunk
          priority: -10, // 缓存组优先级，当一个模块可能属于多个 chunkGroup，这里是优先级
        }
      },
    }
  },
  plugins: [
    ...getHtmlWebpackPlugins(),
  ],
};

:::