{"id":19889468,"url":"https://github.com/theyorkshiredev/dotnetcore-webpack","last_synced_at":"2025-08-01T19:08:36.984Z","repository":{"id":119564397,"uuid":"119191051","full_name":"TheYorkshireDev/dotnetcore-webpack","owner":"TheYorkshireDev","description":"A basic dotnet core website using webpack to bundle assets such as javascript, css and images.","archived":false,"fork":false,"pushed_at":"2018-02-05T21:10:37.000Z","size":571,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-08T05:31:09.045Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TheYorkshireDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2018-01-27T18:30:23.000Z","updated_at":"2018-01-28T11:57:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"84010edd-9422-40d3-98c1-30890a03bf92","html_url":"https://github.com/TheYorkshireDev/dotnetcore-webpack","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TheYorkshireDev/dotnetcore-webpack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheYorkshireDev%2Fdotnetcore-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheYorkshireDev%2Fdotnetcore-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheYorkshireDev%2Fdotnetcore-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheYorkshireDev%2Fdotnetcore-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TheYorkshireDev","download_url":"https://codeload.github.com/TheYorkshireDev/dotnetcore-webpack/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheYorkshireDev%2Fdotnetcore-webpack/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268281840,"owners_count":24225159,"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","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-12T18:10:17.807Z","updated_at":"2025-08-01T19:08:36.955Z","avatar_url":"https://github.com/TheYorkshireDev.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dotnet Core Application with Webpack\n\nA simple dotnet core web application that utilises webpack for bundling assets such as javascript, css and images.\n\nThings to do:\n- [x] 1. Create Dotnet Core 2.0 project\n- [x] 2. Streamline pages and remove cruft that webpack will undertake\n- [x] 3. Install yarn and webpack\n- [x] 4. Add first webpack config \n- [x] 5. Update build process to run webpack\n- [ ] 6. Create production and development configs \n- [ ] 7. Add vendor configs \n- [ ] 8. Include less files\n- [ ] 9. Implement more advanced plugins \n\n1. Using the dotnet core cli create an mvc project\n```\ndotnet new mvc\n```\n\n2. Remove any traces of bootstrap \u0026 jquery that are included in the project template. Also remove and tidy up files we do not need going forward.\n\n**Remove:**\n* bundleconfig.json\n* wwwroot/css/*\n* wwwroot/js/*\n* wwwroot/images/*\n* wwwroot/lib/*\n* Views/Shared/_validationScriptsPartial.cshtml\n\n**Edit:**\n* Remove from Views/Home/About.cshtml\n```html\n\u003cp\u003eUse this area to provide additional information.\u003c/p\u003e\n```\n\n* Remove from Views/Home/Contact.cshtml\n```html\n    \u003caddress\u003e\n        One Microsoft Way\u003cbr /\u003e\n        Redmond, WA 98052-6399\u003cbr /\u003e\n        \u003cabbr title=\"Phone\"\u003eP:\u003c/abbr\u003e\n        425.555.0100\n    \u003c/address\u003e\n    \n    \u003caddress\u003e\n        \u003cstrong\u003eSupport:\u003c/strong\u003e \u003ca href=\"mailto:Support@example.com\"\u003eSupport@example.com\u003c/a\u003e\u003cbr /\u003e\n        \u003cstrong\u003eMarketing:\u003c/strong\u003e \u003ca href=\"mailto:Marketing@example.com\"\u003eMarketing@example.com\u003c/a\u003e\n    \u003c/address\u003e\n```\n\n* Refactor Views/Home/Home.cshtml to\n```html\n@{\n    ViewData[\"Title\"] = \"Home Page\";\n}\n\u003ch2 id=\"title\"\u003e@ViewData[\"Title\"]\u003c/h2\u003e\n```\n\n* Remove from Views/Shared/_Layout.cshtml\n```html\n    \u003cenvironment include=\"Development\"\u003e\n        \u003clink rel=\"stylesheet\" href=\"~/lib/bootstrap/dist/css/bootstrap.css\" /\u003e\n        \u003clink rel=\"stylesheet\" href=\"~/css/site.css\" /\u003e\n    \u003c/environment\u003e\n    \u003cenvironment exclude=\"Development\"\u003e\n        \u003clink rel=\"stylesheet\" href=\"https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css\"\n                asp-fallback-href=\"~/lib/bootstrap/dist/css/bootstrap.min.css\"\n                asp-fallback-test-class=\"sr-only\" asp-fallback-test-property=\"position\" asp-fallback-test-value=\"absolute\" /\u003e\n        \u003clink rel=\"stylesheet\" href=\"~/css/site.min.css\" asp-append-version=\"true\" /\u003e\n    \u003c/environment\u003e\n```\n```html\n    \u003cnav class=\"navbar navbar-inverse navbar-fixed-top\"\u003e\n        \u003cdiv class=\"container\"\u003e\n            \u003cdiv class=\"navbar-header\"\u003e\n                \u003cbutton type=\"button\" class=\"navbar-toggle\" data-toggle=\"collapse\" data-target=\".navbar-collapse\"\u003e\n                    \u003cspan class=\"sr-only\"\u003eToggle navigation\u003c/span\u003e\n                    \u003cspan class=\"icon-bar\"\u003e\u003c/span\u003e\n                    \u003cspan class=\"icon-bar\"\u003e\u003c/span\u003e\n                    \u003cspan class=\"icon-bar\"\u003e\u003c/span\u003e\n                \u003c/button\u003e\n                \u003ca asp-area=\"\" asp-controller=\"Home\" asp-action=\"Index\" class=\"navbar-brand\"\u003ewebsite\u003c/a\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"navbar-collapse collapse\"\u003e\n                \u003cul class=\"nav navbar-nav\"\u003e\n                    \u003cli\u003e\u003ca asp-area=\"\" asp-controller=\"Home\" asp-action=\"Index\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca asp-area=\"\" asp-controller=\"Home\" asp-action=\"About\"\u003eAbout\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca asp-area=\"\" asp-controller=\"Home\" asp-action=\"Contact\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n                \u003c/ul\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/nav\u003e\n```\n```html\n    \u003cenvironment include=\"Development\"\u003e\n        \u003cscript src=\"~/lib/jquery/dist/jquery.js\"\u003e\u003c/script\u003e\n        \u003cscript src=\"~/lib/bootstrap/dist/js/bootstrap.js\"\u003e\u003c/script\u003e\n        \u003cscript src=\"~/js/site.js\" asp-append-version=\"true\"\u003e\u003c/script\u003e\n    \u003c/environment\u003e\n    \u003cenvironment exclude=\"Development\"\u003e\n        \u003cscript src=\"https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js\"\n                asp-fallback-src=\"~/lib/jquery/dist/jquery.min.js\"\n                asp-fallback-test=\"window.jQuery\"\n                crossorigin=\"anonymous\"\n                integrity=\"sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk\"\u003e\n        \u003c/script\u003e\n        \u003cscript src=\"https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js\"\n                asp-fallback-src=\"~/lib/bootstrap/dist/js/bootstrap.min.js\"\n                asp-fallback-test=\"window.jQuery \u0026\u0026 window.jQuery.fn \u0026\u0026 window.jQuery.fn.modal\"\n                crossorigin=\"anonymous\"\n                integrity=\"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa\"\u003e\n        \u003c/script\u003e\n        \u003cscript src=\"~/js/site.min.js\" asp-append-version=\"true\"\u003e\u003c/script\u003e\n    \u003c/environment\u003e\n    \n    @RenderSection(\"Scripts\", required: false)\n```\n\n3. Install javascript dependency manager and first libraries\n\nI am using Yarn as my dependency manager but NPM would also work too, make sure what ever you choose is installed globally.\n\n* Install Yarn: https://yarnpkg.com/en/docs/install\n* Install NPM: https://www.npmjs.com/get-npm\n\nInitalise the repository for the javascript libraries\n```\ncd website/\nwebsite$ yarn init\n\nyarn init v1.3.2\nquestion name (website): \nquestion version (1.0.0): \nquestion description: Simple repository with webpack\nquestion entry point (index.js): \nquestion repository url: https://github.com/TheYorkshireDev/dotnetcore-webpack\nquestion author: TheYorkshireDev\nquestion license (MIT): \nquestion private: \nsuccess Saved package.json\n✨  Done in 74.29s.\n```\n\nThis adds `package.json` to the root of the website folder\n\nThe first library we need is `webpack` so lets install it:\n* Yarn: `yarn add webpack`\n* NPM: `npm install webpack`\n\nFor quicker testing and a better user experience it is a good idea to install it globally too:\n* Yarn: `yarn global add webpack`\n* NPM: `npm install -g webpack`\n\n4. Initial webpack configuration\n\nBefore we create any webpack config, some project configuration needs to take place. Usually, with dotnet core anything under the `wwwroot/` folder is published for this project though that is not going to be the case. We will NOT be publishing the css, javascript or images because they should be bundled by webpack. Instead we are going to be publishing as `dist/` folder containing these bundles, as such we need to exclude the paths of css, javascript and images.\n\nIn the `.csproj` file add:\n```xml\n  \u003cItemGroup\u003e\n    \u003cContent Update=\"wwwroot\\css\\**\\*.*\" CopyToPublishDirectory=\"Never\" /\u003e\n    \u003cContent Update=\"wwwroot\\js\\**\\*.*\" CopyToPublishDirectory=\"Never\" /\u003e\n    \u003cContent Update=\"wwwroot\\images\\**\\*.*\" CopyToPublishDirectory=\"Never\" /\u003e\n  \u003c/ItemGroup\u003e\n```\n\nAdd two javascript files that we will use to test whether webpack worked.\n\nAdd `wwwroot/js/other.js`:\n```js\nfunction func() {\n    document.getElementById(\"title\").style.color = \"#ff0000\";\n}\n\nmodule.exports = func;\n```\n\nAdd `wwwroot/js/main.js`:\n```js\nvar other = require('./other');\n\nother();\n```\nAll we are doing here is making the title on the homepage red.\n\nAdd the code to the view which gives us a title to update and loads the bundle.\n\nTo `_layout.cshtml` add to the bottom of the body:\n```html\n\u003cscript src=\"~/dist/main.build.js\" asp-append-version=\"true\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n5. Build webpack with dotnet\n\nWebpack ideally should be built alongside the C# build rather than calling `webpack` directly, so lets add a couple of targets in the `.csproj`.\n\nAdd a build step to run webpack on build:\n```xml\n  \u003cTarget Name=\"DebugRunWebpack\" BeforeTargets=\"Build\" Condition=\" '$(Configuration)' == 'Debug' \"\u003e\n    \u003c!-- Ensure Node.js is installed --\u003e\n    \u003cExec Command=\"node --version\" ContinueOnError=\"true\"\u003e\n      \u003cOutput TaskParameter=\"ExitCode\" PropertyName=\"ErrorCode\" /\u003e\n    \u003c/Exec\u003e\n    \u003cError Condition=\"'$(ErrorCode)' != '0'\" Text=\"Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE.\" /\u003e\n\n    \u003c!-- In development, the dist files won't exist on the first run or when cloning to\n         a different machine, so rebuild them if not already present. --\u003e\n    \u003cMessage Importance=\"high\" Text=\"Performing development Webpack build...\" /\u003e\n    \u003cExec Command=\"node node_modules/webpack/bin/webpack.js\" /\u003e\n  \u003c/Target\u003e\n```\n\nAdd a build step to run webpack on publish:\n```xml\n  \u003cTarget Name=\"PublishRunWebpack\" AfterTargets=\"ComputeFilesToPublish\"\u003e\n    \u003c!-- As part of publishing, ensure the JS resources are freshly built in production mode --\u003e\n\n    \u003cExec Command=\"npm install\" /\u003e\n    \u003cMessage Importance=\"high\" Text=\"Performing production Webpack build...\" /\u003e\n    \u003cExec Command=\"node node_modules/webpack/bin/webpack.js --env.prod\" /\u003e\n\n    \u003c!-- Include the newly-built files in the publish output --\u003e\n    \u003cItemGroup\u003e\n      \u003cDistFiles Include=\"wwwroot\\dist\\**\" /\u003e\n      \u003cResolvedFileToPublish Include=\"@(DistFiles-\u003e'%(FullPath)')\" Exclude=\"@(ResolvedFileToPublish)\"\u003e\n        \u003cRelativePath\u003e%(DistFiles.Identity)\u003c/RelativePath\u003e\n        \u003cCopyToPublishDirectory\u003ePreserveNewest\u003c/CopyToPublishDirectory\u003e\n      \u003c/ResolvedFileToPublish\u003e\n    \u003c/ItemGroup\u003e\n  \u003c/Target\u003e\n```\n\n6. Create production and development configs\n\nWe are going to extend the webpack configuration to allow for different environments such as development and production. In addition to the environments we want to reduce the amount of duplication between the two and therefore we will also have a base/common config.\n\nCreate a webpack folder with three files:\n```\nwebpack/\n  - webpack.base.config.js\n  - webpack.dev.config.js\n  - webpack.prod.config.js\n```\n\nWe need to install a few additional javascript packages for our webpack config:\n```\nyarn add webpack-merge\nyarn add uglifyjs-webpack-plugin\n```\n\nThe location of the entry point and the name of the output bundle is not going to change depending on environment so these should be defined in the `webpack.base.config.js`.\n\n```js\nvar path = require('path');\n\nfunction baseConfig(currentDirectory) {\n    var config = {\n        entry: {\n            main: './wwwroot/js/main'\n        },\n        output: {\n            publicPath: \"/dist/\",\n            path: path.join(currentDirectory, '/wwwroot/dist/'),\n            filename: 'main.build.js'\n        }\n    };\n\n    return config;\n}\n\nmodule.exports = baseConfig;\n```\nYou may notice we pass in the current directory, this is because these webpack configs are not located in the root of the project so calling `__dirname` here would give us the incorrect folder.\n\nIn the development environment it is useful to have source-map for debugging javascript issues, so we add source map to the development config in `webpack.dev.config.js`\n\n```js\nvar config = {\n    devtool: 'eval-source-map'\n};\n\nmodule.exports = config;\n```\n\nFor production environments you want javascript to be minified so we will add this configuration to `webpack.prod.config.js`\n\n```js\nvar UglifyJsPlugin = require('uglifyjs-webpack-plugin');\n\nvar config = {\n  plugins: [\n    // Minify JS\n    new UglifyJsPlugin({\n      sourceMap: false\n    })\n  ]\n};\n\nmodule.exports = config;\n```\n\nEdit the `webpack.config.js` file to call each of these specific files depending on the environment.\n\n```js\n/*\n * Webpack configuration\n *\n * This file is is the entry point for running webpack. \n */\nvar merge = require('webpack-merge');\nvar baseConfig = require('./webpack/webpack.base.config.js');\nvar devConfig = require('./webpack/webpack.dev.config.js');\nvar prodConfig = require('./webpack/webpack.prod.config.js');\n\nvar currentDirectory = __dirname;\n\nmodule.exports = (env) =\u003e {\n    const isDevBuild = !(env \u0026\u0026 env.prod);\n    return merge(baseConfig(currentDirectory), isDevBuild ? devConfig : prodConfig);\n};\n```\n\n\u003chr\u003e\n\n# Sources\n\n* http://cecilphillip.com/setting-up-webpack-in-asp-net-core/\n* https://medium.com/making-internets/webpack-configuration-done-right-86c325a6927f\n* https://simonsmith.io/organising-webpack-config-environments/\n* https://medium.com/@nirjhor123/webpack-3-quickstarter-configure-webpack-from-scratch-30a6c394038a","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheyorkshiredev%2Fdotnetcore-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheyorkshiredev%2Fdotnetcore-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheyorkshiredev%2Fdotnetcore-webpack/lists"}