Razor Partial Views Webpack Plugin
Plugin for generating ASP.NET Razor partial views for assets built with webpack.
razor-partial-views-webpack-plugin use rules for generating
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.
npm install razor-partial-views-webpack-plugin --save-dev
yarn add razor-partial-views-webpack-plugin --dev
To get familiar with the output from
// webpack.config.jsplugins: ;
The templating process can be customized to fit the needs of your application. Here follows the configuration options that are supported.
// "csharp" (default) or "vb"target: "chsharp"rules:// regex match asset filename(s)// (takes precedence over `name`)test: /.*\.js$/// match asset by namename: "runtime"// no attributes in `template` are requiredtemplate:// prepend header to view"<!-- a header -->"// usings in viewusing: "System" "System.Web"// view's modelmodel: "dynamic"// append footer to view`@* View generated *@`// if needed, use a custom templatepath: path// 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/filenameoutput:inline: trueasync: falsedefer: false// asset is ESM modulemodule: false// ...or fallback if module not supportednomodule: false// assign predicable name to generated partial view`generated-`// output view to custom locationpath: path;
razor-partial-views-webpack-plugin supports referencing and inlining assets generated by webpack. Here follows an example configuration based on webpack's caching docs. A partial view for styles is also created.
const path = ;const MiniCssExtractPlugin = ;const RazorPartialViewsWebpackPlugin = ;moduleexports =entry:app: pathoutput:path: pathpublicPath: "/dist/"filename: "[name].[contenthash].js"module:rules:test: /\.css$/use:loader: MiniCssExtractPluginloader"css-loader"optimization:runtimeChunk: "single"splitChunks:cacheGroups:defaultVendors:test: /[\\/]node_modules[\\/]/name: "vendors"chunks: "all"defaultStyles:name: "styles"test: /\.css$/chunks: "all"enforce: trueplugins:filename: "[name].[contenthash].css"ignoreOrder: falserules:name: "app" "vendors" "styles"name: "runtime"output:inline: true;
Options in use
Included in the plugin repository is an example webpack setup where various rules are used. By executing
npm run example, partial views are created e.g. for inlining CSS and webpack's runtime.
When running your ASP.NET web site, the generated views will be compiled. Below follows a few tips to keep in mind:
- If you run into
Compiler Error Message: CS0103: The name 'model' does not exist in the current context, this Stack Overflow answer guides you in the right direction.
- If you're executing
razor-partial-views-webpack-pluginon a build server, make sure you've included the generated views' output directory in the artifact.
Even more control
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.