https://github.com/theyorkshiredev/dotnetcore-webpack
A basic dotnet core website using webpack to bundle assets such as javascript, css and images.
https://github.com/theyorkshiredev/dotnetcore-webpack
Last synced: 12 months ago
JSON representation
A basic dotnet core website using webpack to bundle assets such as javascript, css and images.
- Host: GitHub
- URL: https://github.com/theyorkshiredev/dotnetcore-webpack
- Owner: TheYorkshireDev
- Created: 2018-01-27T18:30:23.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-05T21:10:37.000Z (over 8 years ago)
- Last Synced: 2025-07-08T05:31:09.045Z (about 1 year ago)
- Language: C#
- Homepage:
- Size: 558 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dotnet Core Application with Webpack
A simple dotnet core web application that utilises webpack for bundling assets such as javascript, css and images.
Things to do:
- [x] 1. Create Dotnet Core 2.0 project
- [x] 2. Streamline pages and remove cruft that webpack will undertake
- [x] 3. Install yarn and webpack
- [x] 4. Add first webpack config
- [x] 5. Update build process to run webpack
- [ ] 6. Create production and development configs
- [ ] 7. Add vendor configs
- [ ] 8. Include less files
- [ ] 9. Implement more advanced plugins
1. Using the dotnet core cli create an mvc project
```
dotnet new mvc
```
2. Remove any traces of bootstrap & jquery that are included in the project template. Also remove and tidy up files we do not need going forward.
**Remove:**
* bundleconfig.json
* wwwroot/css/*
* wwwroot/js/*
* wwwroot/images/*
* wwwroot/lib/*
* Views/Shared/_validationScriptsPartial.cshtml
**Edit:**
* Remove from Views/Home/About.cshtml
```html
Use this area to provide additional information.
```
* Remove from Views/Home/Contact.cshtml
```html
One Microsoft Way
Redmond, WA 98052-6399
P:
425.555.0100
Support: Support@example.com
Marketing: Marketing@example.com
```
* Refactor Views/Home/Home.cshtml to
```html
@{
ViewData["Title"] = "Home Page";
}
@ViewData["Title"]
```
* Remove from Views/Shared/_Layout.cshtml
```html
```
```html
```
```html
@RenderSection("Scripts", required: false)
```
3. Install javascript dependency manager and first libraries
I am using Yarn as my dependency manager but NPM would also work too, make sure what ever you choose is installed globally.
* Install Yarn: https://yarnpkg.com/en/docs/install
* Install NPM: https://www.npmjs.com/get-npm
Initalise the repository for the javascript libraries
```
cd website/
website$ yarn init
yarn init v1.3.2
question name (website):
question version (1.0.0):
question description: Simple repository with webpack
question entry point (index.js):
question repository url: https://github.com/TheYorkshireDev/dotnetcore-webpack
question author: TheYorkshireDev
question license (MIT):
question private:
success Saved package.json
✨ Done in 74.29s.
```
This adds `package.json` to the root of the website folder
The first library we need is `webpack` so lets install it:
* Yarn: `yarn add webpack`
* NPM: `npm install webpack`
For quicker testing and a better user experience it is a good idea to install it globally too:
* Yarn: `yarn global add webpack`
* NPM: `npm install -g webpack`
4. Initial webpack configuration
Before 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.
In the `.csproj` file add:
```xml
```
Add two javascript files that we will use to test whether webpack worked.
Add `wwwroot/js/other.js`:
```js
function func() {
document.getElementById("title").style.color = "#ff0000";
}
module.exports = func;
```
Add `wwwroot/js/main.js`:
```js
var other = require('./other');
other();
```
All we are doing here is making the title on the homepage red.
Add the code to the view which gives us a title to update and loads the bundle.
To `_layout.cshtml` add to the bottom of the body:
```html