javascript - problème de configuration multi-entrées du webpack, le résultat packagé devient que chaque code HTML fait référence à tous les fichiers js packagés

Question

Par exemple, comment dois-je le configurer pour que HTML puisse monter le fichier js correspondant ? Étant donné que le fichier a un hachage, il n'y a aucun moyen de l'écrire à l'aide de htmlWebpackPlugin. Ou existe-t-il un moyen de résoudre ce problème ?

迷茫 · Answer

Puis-je définir plusieurs HtmlWebpackPlugins dans les plugins et spécifier le Chunk correspondant dans chaque plugin, comme suit

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

J'ai fait quelques modifications à l'étage

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'
},

Vous mettez le fichier original sous src/view...
Le fichier produit sera placé dans dist/'view/' + nom + '.html'