Webpack 5 – Les fichiers HTML

par

sources: https://webpack.js.org/loaders/html-loader

Les balises contenant des URI doivent être modifiées lors de leur transformations par la configuration des assets dans webpack.

Il est nécessaire d’utiliser le loader html-loader et le plugin html-webpack-plugin.

Installons les avec

npm i -D html-loader html-webpack-plugin

Pour html-loader modifiez webpack.config.js

  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: 'html-loader',
          options: {
            sources: true,
            minimize: true
          }
      }
    ]
  }

Ils est possible de spécifier des options comme la gestions des sources et la minification.

Pour html-webpack-plugin modifiez webpack.config.js

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: path.resolve(__dirname, './dist/js/index.html'),
      template: path.resolve(__dirname, './src/index.html')
    })
  ]

Si vous souhaitez inclure plusieurs fichiers html (ou de template html) sans spécifier leur nom il est nécessaire d’installer le paquet glob

npm i -D glob

Ensuite dans webpack.config.js il faut modifier la partie module.exports { … } et ajouter 

const glob = require('glob')
//...
let config = {
  entry: //...,
  // ...
  plugins: { //... },
  module: { //...}
}

const files = glog.sync(path.resolve(__dirname, './src/') + '/*.html')
files.forEach(file => {
  config.plugins.push(new HtmlWebpackPlugin({
    filename: path.basename(file)
    template: file
  }))
})
module.exports = config

Laisser un commentaire