// webpack.config.js
plugins: [new RazorPartialViewsWebpackPlugin()];

new RazorPartialViewsWebpackPlugin({
  // "csharp" (default) or "vb"
  target: "chsharp",
  rules: [
    {
      // regex match asset filename(s)
      // (takes precedence over `name`)
      test: /(app|vendor).*\.js$/
    },
    {
      // match asset by name
      name: "runtime",
      // no attributes in `template` are required
      template: {
        // prepend header to view
        header: () => "<!-- a header -->",
        // usings in view
        using: ["System", "System.Web"],
        // view's model
        model: "dynamic",
        // append footer to view
        footer: () => `@* View generated ${new Date().toISOString()} *@`,
        // if needed, use a custom template
        path: path.join(__dirname, "templates/custom-template.tmpl"),
        // in custom template, placeholder to find & replace with asset
        // (default ##URL##/##SOURCE##)
        replace: /##CONTENT-GOES-HERE##/
      },
      // `output` not required, defaults to:
      // - webpack's output directory
      // - load asset by URL
      // - asset name from chunk name/filename
      output: {
        inline: true,
        async: false,
        defer: false,
        // asset is ESM module
        module: false,
        // ...or fallback if module not supported
        nomodule: false,
        // assign predicable name to generated partial view
        name: defaultName => `generated-${defaultName}`,
        // output view to custom location
        path: path.join(__dirname, "Views/_GeneratedViews")
      }
    }
  ]
});

const path = require("path");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const RazorPartialViewsWebpackPlugin = require("razor-partial-views-webpack-plugin");

module.exports = {
  entry: {
    app: path.join(__dirname, "app.js")
  },
  output: {
    path: path.join(__dirname, "dist"),
    publicPath: "/dist/",
    filename: "[name].[contenthash].js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          "css-loader"
        ]
      }
    ]
  },
  optimization: {
    runtimeChunk: "single",
    splitChunks: {
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all"
        },
        defaultStyles: {
          name: "styles",
          test: /\.css$/,
          chunks: "all",
          enforce: true
        }
      }
    }
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
      ignoreOrder: false
    }),
    new RazorPartialViewsWebpackPlugin({
      rules: [
        {
          name: ["app", "vendors", "styles"]
        },
        {
          name: "runtime",
          output: {
            inline: true
          }
        }
      ]
    })
  ]
};