Webpack多页面应用4：动态获取入口

$ npm install glob -D 

const glob = require('glob');

/* 
 * 1. 我们以文件夹里是否有html文件为准，来判断是否需要生成多页面
 * 2. 我们的多页应用目录最多支持三级
 */ 
const pages = glob.sync('./src/pages/**?/**/index.html').map(item => {
  /* 
   * pathArr
   * = [ '.', 'src', 'pages', 'home', 'index.html' ] 
   * = [ '.', 'src', 'pages', 'blog', 'list', 'index.html' ]
   * = [ '.', 'src', 'pages', 'blog', 'list', 'detail', 'index.html' ]
  */
  const pathArr = item.split('/'); 
  // 从第3个截取至倒数第一个，为我们的文件名
  return pathArr.slice(3, pathArr.length - 1).join('-');
});

const createEntry = () => {
  let entry = {};
  pages.forEach(name => {
    const pagePath = name.split('-').join('/');
    entry[name] = path.join(__dirname, `./src/pages/${pagePath}/index.js`);
  });
  return entry;
};

const createHtmlPlugin = () => {
  let plugins = [];
  pages.forEach(name => {
    const pagePath = name.split('-').join('/');
    plugins.push(
      new HtmlWebpackPlugin({
        minify: false,
        title: name,
        template: path.join(__dirname, `./src/pages/${pagePath}/index.html`),
        filename: path.join(__dirname, `./dist/${name}.html`),
        inject: 'body',
        chunks: [name],
        hash: false,
        publicPath: '',
      }),
    );
  });
  return plugins;
};

module.exports = {
  entry: createEntry(),

  // ...

  plugins: [...createHtmlPlugin()],
};