javascript - webpack multi-entry configuration problem, the packaged result becomes that each html refers to all packaged js files

Question

Like the title
How should I configure it so that html can mount the corresponding js file.
Because the file has hash, there is no way to write it with htmlWebpackPlugin. Or is there any way to solve this problem?

Answer 1

Can I define multiple HtmlWebpackPlugins in plugins, and specify the corresponding Chunk in each Plugin, as follows

module.exports = {
  entry: {
    'page1': './apps/page1/scripts/main.js',
    'page2': './apps/page2/src/main.js'
  },
  output: {
    path: __dirname,
    filename: "apps/[name]/build/bundle.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: false,
      chunks: ['page1'],
      filename: 'apps/page1/build/index.html'
    }),
    new HtmlWebpackPlugin({
      inject: false,
      chunks: ['page2'],
      filename: 'apps/page2/build/index.html'
    })
  ]
};

Answer 2

Made some modifications upstairs

var getHtmlConfig = function(name){
    return {
        template    : './src/view/' + name + '.html',
        filename    : 'view/' + name + '.html',
        inject      : true,
        hash        : true,
        chunks      : ['common', name]
    };
};
plugins: [
    new HtmlWebpackPlugin( getHtmlConfig（name1）)，
    new HtmlWebpackPlugin( getHtmlConfig（name2）)，
    new HtmlWebpackPlugin( getHtmlConfig（name3）)
]

---

output: {
    path: './dist',
    publicPath : '/dist',
    filename: 'js/[name].js'
},

You put the original file under src/view...
The produced file will be placed in dist/'view/' + name + '.html'