多入口页面的通用配置

一、通用配置

当我们的项目由多个入口时，我们要在webpack的entry中配置入口文件，但是我们不想像这样：

entry:{
  'index': './src/index/index.js',
  'search': './src/search/index.js',
......
}

这样手动的添加很麻烦，每次要增加一个入口页面，都要在entry里面增加一条，并且还要为每一个入口配置一个HtmlWebpackPlugin，这样写太麻烦了，我们想要一个通用的方案，增加相应的文件就可以了，不需要再手动的添加入口。

这里我们使用glob这个包，它能够匹配出符合要求的文件的路径。

通用方案：

const setMPA = () => {  const entry = {};  const htmlWebpackPlugin = [];  const entryFile = glob.sync(path.join(__dirname, "./src/*/index.js"));  entryFile.forEach((key) => {    const arr = key.match(/src\/(.*)\/index\.js/g);    const name = arr[0].split("src/")[1].split("/");    entry[name[0]] = `./${arr[0]}`;    htmlWebpackPlugin.push(      new HtmlWebpacPlugin({        template: `${__dirname}/src/${name[0]}/index.html`,        filename: `${name[0]}.html`,        chunks: ["vendors", name[0]],      })    );  });  return { entry, htmlWebpackPlugin };};

entryFile是一个数组，成员是绝对路径。

多入口页面之间是相互独立的。

要使用公用提出的资源时，可以加在chunks中。