{"id":13596327,"url":"https://github.com/jouni-kantola/razor-partial-views-webpack-plugin","last_synced_at":"2025-04-09T16:32:09.801Z","repository":{"id":26880591,"uuid":"110319776","full_name":"jouni-kantola/razor-partial-views-webpack-plugin","owner":"jouni-kantola","description":"Plugin for generating ASP.NET Razor partial views for assets built with webpack.","archived":false,"fork":false,"pushed_at":"2024-12-14T08:11:16.000Z","size":1233,"stargazers_count":14,"open_issues_count":4,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-11T01:54:13.449Z","etag":null,"topics":["aspnet","razor","webpack","webpack-plugin"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jouni-kantola.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-11T05:07:41.000Z","updated_at":"2025-01-20T05:06:36.000Z","dependencies_parsed_at":"2024-11-06T19:36:34.602Z","dependency_job_id":"2453b841-6e80-40e1-bdfe-67aac4fc3a45","html_url":"https://github.com/jouni-kantola/razor-partial-views-webpack-plugin","commit_stats":{"total_commits":110,"total_committers":4,"mean_commits":27.5,"dds":"0.21818181818181814","last_synced_commit":"633417dfef6a8aa46f359f49ed8428bb5a68d39b"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jouni-kantola%2Frazor-partial-views-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jouni-kantola%2Frazor-partial-views-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jouni-kantola%2Frazor-partial-views-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jouni-kantola%2Frazor-partial-views-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jouni-kantola","download_url":"https://codeload.github.com/jouni-kantola/razor-partial-views-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248067863,"owners_count":21042364,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aspnet","razor","webpack","webpack-plugin"],"created_at":"2024-08-01T16:02:18.709Z","updated_at":"2025-04-09T16:32:04.790Z","avatar_url":"https://github.com/jouni-kantola.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Razor Partial Views Webpack Plugin\n\nPlugin for generating ASP.NET Razor partial views for assets built with webpack.\n\n![Build Status](https://github.com/jouni-kantola/razor-partial-views-webpack-plugin/workflows/Node.js%20CI/badge.svg)\n\n## Usage\n\n`razor-partial-views-webpack-plugin` use rules for generating `cshtml`/`vbhtml` views wrapping assets built with webpack. With the plugin comes templates for scripts and styles, but any type of asset can be used as Razor view source.\n\n## Installation\n\n- `npm install razor-partial-views-webpack-plugin --save-dev`\n- `yarn add razor-partial-views-webpack-plugin --dev`\n\n## Getting started\n\nTo get familiar with the output from `razor-partial-views-webpack-plugin`, the quickest way is using the plugin's defaults, to generate partial views for all JavaScript and CSS.\n\n```javascript\n// webpack.config.js\nplugins: [new RazorPartialViewsWebpackPlugin()];\n```\n\n## Options\n\nThe templating process can be customized to fit the needs of your application. Here follows the configuration options that are supported.\n\n```javascript\nnew RazorPartialViewsWebpackPlugin({\n  // \"csharp\" (default) or \"vb\"\n  target: \"chsharp\",\n  rules: [\n    {\n      // regex match asset filename(s)\n      // (takes precedence over `name`)\n      test: /(app|vendor).*\\.js$/\n    },\n    {\n      // match asset by name\n      name: \"runtime\",\n      // no attributes in `template` are required\n      template: {\n        // prepend header to view\n        header: () =\u003e \"\u003c!-- a header --\u003e\",\n        // usings in view\n        using: [\"System\", \"System.Web\"],\n        // view's model\n        model: \"dynamic\",\n        // append footer to view\n        footer: () =\u003e `@* View generated ${new Date().toISOString()} *@`,\n        // if needed, use a custom template\n        path: path.join(__dirname, \"templates/custom-template.tmpl\"),\n        // in custom template, placeholder to find \u0026 replace with asset\n        // (default ##URL##/##SOURCE##)\n        replace: /##CONTENT-GOES-HERE##/\n      },\n      // `output` not required, defaults to:\n      // - webpack's output directory\n      // - load asset by URL\n      // - asset name from chunk name/filename\n      output: {\n        inline: true,\n        async: false,\n        defer: false,\n        // asset is ESM module\n        module: false,\n        // ...or fallback if module not supported\n        nomodule: false,\n        // assign predicable name to generated partial view\n        name: defaultName =\u003e `generated-${defaultName}`,\n        // output view to custom location\n        path: path.join(__dirname, \"Views/_GeneratedViews\")\n      }\n    }\n  ]\n});\n```\n\n## Example configuration\n\n`razor-partial-views-webpack-plugin` supports referencing and inlining assets generated by webpack. Here follows an example configuration based on [webpack's caching docs](https://webpack.js.org/guides/caching/). A partial view for styles is also created.\n\n```javascript\nconst path = require(\"path\");\n\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\n\nconst RazorPartialViewsWebpackPlugin = require(\"razor-partial-views-webpack-plugin\");\n\nmodule.exports = {\n  entry: {\n    app: path.join(__dirname, \"app.js\")\n  },\n  output: {\n    path: path.join(__dirname, \"dist\"),\n    publicPath: \"/dist/\",\n    filename: \"[name].[contenthash].js\"\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          {\n            loader: MiniCssExtractPlugin.loader\n          },\n          \"css-loader\"\n        ]\n      }\n    ]\n  },\n  optimization: {\n    runtimeChunk: \"single\",\n    splitChunks: {\n      cacheGroups: {\n        defaultVendors: {\n          test: /[\\\\/]node_modules[\\\\/]/,\n          name: \"vendors\",\n          chunks: \"all\"\n        },\n        defaultStyles: {\n          name: \"styles\",\n          test: /\\.css$/,\n          chunks: \"all\",\n          enforce: true\n        }\n      }\n    }\n  },\n  plugins: [\n    new MiniCssExtractPlugin({\n      filename: \"[name].[contenthash].css\",\n      ignoreOrder: false\n    }),\n    new RazorPartialViewsWebpackPlugin({\n      rules: [\n        {\n          name: [\"app\", \"vendors\", \"styles\"]\n        },\n        {\n          name: \"runtime\",\n          output: {\n            inline: true\n          }\n        }\n      ]\n    })\n  ]\n};\n```\n\n## Options in use\n\nIncluded in the plugin repository is an example webpack setup where various [rules](https://github.com/jouni-kantola/razor-partial-views-webpack-plugin/blob/master/example/razor-partial-views-config.js) are used. By executing `npm run example`, partial views are created e.g. for inlining CSS and webpack's runtime.\n\n## Compiling views\n\nWhen running your ASP.NET web site, the generated views will be compiled. Below follows a few tips to keep in mind:\n\n- If you run into `Compiler Error Message: CS0103: The name 'model' does not exist in the current context`, this [Stack Overflow answer](https://stackoverflow.com/a/19696998) guides you in the right direction.\n- If you're executing `razor-partial-views-webpack-plugin` on a build server, make sure you've included the generated views' output directory in the artifact.\n\n## Even more control\n\n`razor-partial-views-webpack-plugin` is an extension of `templated-assets-webpack-plugin`. For more configuration options and detailed control, use [templated-assets-webpack-plugin](https://github.com/jouni-kantola/templated-assets-webpack-plugin).\n\n## Feedback\n\n- For feedback, bugs or change requests, please use [Issues](https://github.com/jouni-kantola/razor-partial-views-webpack-plugin/issues).\n- For direct contact, tweet [@jouni_kantola](https://twitter.com/jouni_kantola).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjouni-kantola%2Frazor-partial-views-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjouni-kantola%2Frazor-partial-views-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjouni-kantola%2Frazor-partial-views-webpack-plugin/lists"}