webpack多入口文件配合html模板输出script标签插入路径问题

Question

文件目录

--src
  --Page1
    --index.js
    ...
  --Page2
    --index.js
    ...
  --Page3
    --index.js
    ...
webpack.config.js

目标输出目录

--dist
  --Page1
    --bundle.[hash:12].min.js
    index.html
  --Page2
    --bundle.[hash:12].min.js
    index.html
  ...  

webpack.config.js

entry:entries,
output: {
    path: path.join(__dirname,'dist'),
    publicPath: debug ? '/dist/' : '/',
    filename: debug ? '[name]/bundle.js' : '[name]/bundle.[hash:12].min.js',
  },

var entries = getEntry('./src/**/index.js')
function getEntry (globPath) {
    let files = glob.sync(globPath),
      entries = {};
    files.forEach(function(filepath) {
        let split = filepath.split('/');
    let name = split[split.length - 2];
    entries[name] =  filepath;
  });
  return entries;
}

let count = 0
!debug && Object.keys(entries).forEach(function(name) {
    webpackConfig.entry[name] = entries[name];
    let plugin = new HtmlWebpackPlugin({
    title: titles[count],
        filename: name + '/index.html',
        template: './template.html',
        inject: true,
        chunks: [name]
    });
  webpackConfig.plugins.push(plugin)

在build之后的dist/[name]/index.html中的script标签路径是这样的:

src="/[name]/bundle.[hash:12].min.js"

虽然bundle.js到了指定name目录下 但是script路径是有问题的,各位大哥有没有好的解决思路呢？？
拜谢~！

Answer 1

给每页面对应的index.js 取个名字 比如 modA/modA.html 和 modA/modA.js
在new HtmlWebpackPlugin 的地方和生成html的别名一样就可以找到对应的js了
webpackconfig.plugins = entryArr.map( ({ name, filepath }) => {
return new HtmlWebpackPlugin({

    title: `${name}`,
     filename: path.resolve(__dirname, `dist/${name}/${name}.html`),
     template: path.resolve(__dirname, `src/${name}/${name}.html`), 
     chunks:[`${name}`], // 这里应该就可以找到 modA/modA.js 
     inject:true,
     hash:true
  });

});