javascript - masalah konfigurasi berbilang kemasukan webpack, hasil yang dibungkus menjadi bahawa setiap html merujuk kepada semua fail js yang dibungkus

Question

Sama seperti tajuk
Bagaimana saya harus mengkonfigurasinya supaya html boleh melekapkan fail js yang sepadan.
Oleh kerana fail mempunyai hash, tiada cara untuk menulisnya menggunakan htmlWebpackPlugin Atau adakah terdapat cara untuk menyelesaikan masalah ini?

Answer 1

Bolehkah saya mentakrifkan berbilang HtmlWebpackPlugin dalam pemalam, dan tentukan Chunk yang sepadan dalam setiap Pemalam, seperti berikut

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

Membuat beberapa pengubahsuaian di tingkat atas

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

Anda meletakkan fail asal di bawah src/view...
Fail yang dihasilkan akan diletakkan di dist/'view/' + name + '.html'