多页面打包

多页面打包

• 动态获取entry和设置html-webpack-plugin数量

• 利用glob库获取文件目录

• 修改文件路径

  一个页面在src下单独创建一个页面文件夹，然后里面放index.js和index.html

  • src
    • index
      • index.js
      • index.html
    • shop
      • index.js
      • index.html

// html打包工具
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 获取glob对象
const glob = require("glob");

// 获取entry 和 HtmlWebpackPlugin对象数组
const setMAP = () => {
      let entry = {};
      let htmlWebpackPlugins = [];
	  // 获取文件路径	
      const entryFiles = glob.sync(path.join(__dirname, "./src/*/index.js"));
      
      entryFiles.map((entryFile) => {
            // 分割路径，获取到对应的数据
            const match = entryFile.match(/src\/(.*)\/index\.js/);
            // 页面的pageName（文件夹名称）
            const pageName = match && match[1];
            // entry对象配置
            entry[pageName] = entryFile;
            // HtmlWebpackPlugin数组配置，一个页面一个配置
            htmlWebpackPlugins.push(
                  new HtmlWebpackPlugin({
                        template: path.join(__dirname, `src/${pageName}/index.html`),
                        filename: `${pageName}.html`,
                        chunks: [pageName],
                        inject: true,
                        minify: {
                              html5: true,
                              conllapseWhitespace: true,
                              preserveLineBreaks: false,
                              minifyCSS: true,
                              minifyJS: true,
                              removeComments: false,
                        },
                  })
            );
      });

      return {
            entry,
            htmlWebpackPlugins,
      };
};

let { entry, htmlWebpackPlugins } = setMAP();

配置

module.exports = {
      mode: "development", 
      entry:entry,
      output: {
            // 省略。。。。
      },
      module: {
            // 省略。。。。
      },
      plugins: [ 
            ...htmlWebpackPlugins
      ]
};

其实这里就是和平时的js一样，没有那么神秘，主要是了解webpack的规则