vtex-email-framework/webpack/webpack.prod.js

Transactional emails development architecture

const { readdirSync } = require('node:fs')
const { resolve ,join} = require('node:path')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPartialsPlugin = require('html-webpack-partials-plugin');
const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").default;
const templateFiles = readdirSync(resolve('emails', 'templates','custom')).filter(folder => /.hbs$/gi.test(folder));
const partialsFiles = readdirSync(resolve('emails', 'templates', 'custom','partials')).filter(folder => /.hbs$/gi.test(folder));

module.exports = {
  entry: join(__dirname,'src'),
  output: {
    path: resolve('emails', 'dist'),
  },
  mode: 'production',
  stats: 'errors-only',

  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin(),
    new HTMLInlineCSSWebpackPlugin(),
    ...templateFiles.map(file => {
      return new HtmlWebpackPlugin({
        filename: file,
        template: `emails/templates/custom/${file}`,
        inject: false,
        minify: false
      })
    }),
    ...partialsFiles.map(partial => {
      return new HtmlWebpackPartialsPlugin({
        path: `emails/templates/custom/partials/${partial}`,
        location: partial.replace(/.hbs/gi, ''),
        priority: 'replace',
        template_filename: [...templateFiles]
      })
    }),
  ],

  module: {
    rules: [
      {
        test: /\.js$/,
      },
      {
        test: /\.(sa|sc|c|s)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass-embedded'),
              sassOptions: {
                loadPaths: [resolve(process.cwd(),'emails', 'scss')],
              }
            },
          },
        ]
      }
    ]
  }
}