webpack(七) 动态打包多入口文件

• webpack如何打包多入口文件
  webpack打包文件主要是靠entry中配置对象，对象的key有几个，那么对象的入口就有几个。同时还需要配置多个htmlWebpackPlugin插件，从而达到打包多入口
• webpack 打包多入口的思路
  webpack需要借助node中的global库，通过global中的sync方法，把想要打包文件夹添加到指定目录，然后遍历文件夹，得到文件夹名称，生成相应的entry和htmlWebpackPlugin
• 配置步骤
• 安装 global

npm install global  html-webpack-plugin -D

• 配置entry和 htmlWebpackPlugin

const setMpa = () => {
  const entry = {};
  const htmlwebpackplugins = [];

  const entryFiles = glob.sync(path.join(__dirname, "./src/*/index.js"));

  entryFiles.map((item, index) => {
    const entryFile = entryFiles[index];
    const match = entryFile.match(/src\/(.*)\/index\.js$/);
    const pageName = match[1];
    entry[pageName] = entryFile;
    htmlwebpackplugins.push(
      new htmlWebpackPlugin({
        template: `./src/${pageName}/index.html`,
        filename: `${pageName}.html`,
        chunks: [pageName], //表示：只会把这个chunk的信息添加到这段html中
      })
    );
  });

  return {
    entry,
    htmlwebpackplugins,
  };
};
const { entry, htmlwebpackplugins } = setMpa(); //把entry htmlwebpackplugins 分别配置到entry和plugins中就可以了

• 注意：关于 glob.sync 函数
  例如 glob.sync(path.join(__dirname, "./src/*/index.js")); 表示扫描src文件夹下面的所有文件中包括index.js文件都是入口文件。路径例如：“./scr/path/index.js” 符合条件