You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/Microsoft.AspNetCore.SpaServices/README.md
+53-2Lines changed: 53 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -325,9 +325,60 @@ Benefits:
325
325
326
326
It lets you work as if the browser natively understands whatever file types you are working with (e.g., TypeScript, SASS), because it's as if there's no build process to wait for.
327
327
328
+
### Example: A simple Webpack setup
329
+
330
+
**Note:** If you already have Webpack in your project, then you can skip this section.
331
+
332
+
As a simple example, here's how you can set up Webpack to build TypeScript files. First install the relevant NPM packages by executing this from the root directory of your project:
333
+
334
+
```
335
+
npm install --save typescript ts-loader
336
+
```
337
+
338
+
And if you don't already have it, you'll find it useful to install the `webpack` command-line tool:
339
+
340
+
```
341
+
npm install -g webpack
342
+
```
343
+
344
+
Now add a Webpack configuration file. Create `webpack.config.js` in the root of your project, containing the following:
345
+
346
+
```javascript
347
+
module.exports= {
348
+
resolve: {
349
+
// For modules referenced with no filename extension, Webpack will consider these extensions
350
+
extensions: [ '', '.js', '.ts' ]
351
+
},
352
+
module: {
353
+
loaders: [
354
+
// This example only configures Webpack to load .ts files. You can also drop in loaders
355
+
// for other file types, e.g., .coffee, .sass, .jsx, ...
356
+
{ test:/\.ts$/, loader:'ts-loader' }
357
+
]
358
+
},
359
+
entry: {
360
+
// The loader will follow all chains of reference from this entry point...
361
+
main: ['./ClientApp/MyApp.ts']
362
+
},
363
+
output: {
364
+
// ... and emit the built result in this location
365
+
path:__dirname+'/wwwroot/dist',
366
+
filename:'[name].js'
367
+
},
368
+
};
369
+
```
370
+
371
+
Now you can put some TypeScript code (minimally, just `console.log('Hello');`) at `ClientApp/MyApp.ts` and then run `webpack` from the command line to build it (and everything it references). The output will be placed in `wwwroot/dist`, so you can load and run it in a browser by adding the following to one of your views (e.g., `Views\Home\Index.cshtml`):
372
+
373
+
<script src="/dist/main.js"></script>
374
+
375
+
The Webpack loader, `ts-loader`, follows all chains of reference from `MyApp.ts` and will compile all referenced TypeScript code into your output. If you want, you can create a [`tsconfig.json` file](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) to control things like whether source maps will be included in the output. If you add other Webpack loaders to your `webpack.config.js`, you can even reference things like SASS from your TypeScript, and then it will get built to CSS and loaded automatically.
376
+
377
+
So that's enough to build TypeScript. Here's where webpack dev middleware comes in to auto-build your code whenever needed (so you don't need any file watchers or to run `webpack` manually), and optionally hot module replacement (HMR) to push your changes automatically from code editor to browser without even reloading the page.
378
+
328
379
### Enabling webpack dev middleware
329
380
330
-
After installing the `Microsoft.AspNetCore.SpaServices` NuGet package and the `aspnet-webpack` NPM package, go to your `Startup.cs` file, and **before your call to `UseStaticFiles`**, add the following:
381
+
First install the `Microsoft.AspNetCore.SpaServices` NuGet package and the `aspnet-webpack` NPM package, then go to your `Startup.cs` file, and **before your call to `UseStaticFiles`**, add the following:
331
382
332
383
```csharp
333
384
if (env.IsDevelopment()) {
@@ -337,7 +388,7 @@ if (env.IsDevelopment()) {
337
388
// You call to app.UseStaticFiles(); should be here
338
389
```
339
390
340
-
You will also need to edit your webpack configuration at `webpack.config.js`. Since `UseWebpackDevMiddleware` needs to know which incoming requests to intercept, specify a `publicPath` value on your `output`, for example:
391
+
Also check your webpack configuration at `webpack.config.js`. Since `UseWebpackDevMiddleware` needs to know which incoming requests to intercept, make sure you've specified a `publicPath` value on your `output`, for example:
0 commit comments