diff --git a/docs/javascript/compile-typescript-code-npm.md b/docs/javascript/compile-typescript-code-npm.md index fe9c88f541e..ef2fe3fde68 100644 --- a/docs/javascript/compile-typescript-code-npm.md +++ b/docs/javascript/compile-typescript-code-npm.md @@ -100,7 +100,7 @@ The [TypeScript npm package](https://www.npmjs.com/package/typescript) adds Type }, ``` - To build using a third-party tool like Webpack, you can add a command-line build script to your *package.json* file: + To build using a third-party tool like webpack, you can add a command-line build script to your *package.json* file: ```json "scripts": { @@ -109,7 +109,7 @@ The [TypeScript npm package](https://www.npmjs.com/package/typescript) adds Type ``` ::: moniker range="vs-2019" - For an example of using Webpack with React and a Webpack configuration file, see [Create a web app with Node.js and React](../javascript/tutorial-nodejs-with-react-and-jsx.md). + For an example of using webpack with React and a webpack configuration file, see [Create a web app with Node.js and React](../javascript/tutorial-nodejs-with-react-and-jsx.md). For an example of using Vue.js with TypeScript, see [Create a Vue.js application](create-application-with-vuejs.md). ::: moniker-end @@ -139,10 +139,10 @@ Press **Ctrl+F5** (or **Debug > Start Without Debugging**) to run the applicatio ## Automate build tasks -You can use Task Runner Explorer in Visual Studio to help automate tasks for third-party tools like npm and Webpack. +You can use Task Runner Explorer in Visual Studio to help automate tasks for third-party tools like npm and webpack. - [NPM Task Runner](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NPMTaskRunner) - Adds support for npm scripts defined in *package.json*. Supports yarn. -- [Webpack Task Runner](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebPackTaskRunner) - Adds support for Webpack. +- [Webpack Task Runner](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebPackTaskRunner) - Adds support for webpack. ## Related content diff --git a/docs/javascript/create-application-with-vuejs.md b/docs/javascript/create-application-with-vuejs.md index ce0c5baee19..180fe74459f 100644 --- a/docs/javascript/create-application-with-vuejs.md +++ b/docs/javascript/create-application-with-vuejs.md @@ -84,9 +84,9 @@ To install the vue-cli npm module, open a command prompt and type `npm install - 1. Type `vue init webpack client-app` and follow steps when prompted to answer additional questions. > [!NOTE] - > For *.vue* files, you need to use Webpack or a similar framework with a loader to do the conversion. TypeScript and Visual Studio does not know how to compile *.vue* files. The same is true for bundling; TypeScript doesn't know how to convert ES2015 modules (that is, `import` and `export` statements) into a single final *.js* file to load in the browser. Again, Webpack is the best choice here. To drive this process from within Visual Studio using MSBuild, you need to do start from a Visual Studio template. At present, there is no ASP.NET template for Vue.js development in-the-box. + > For *.vue* files, you need to use webpack or a similar framework with a loader to do the conversion. TypeScript and Visual Studio does not know how to compile *.vue* files. The same is true for bundling; TypeScript doesn't know how to convert ES2015 modules (that is, `import` and `export` statements) into a single final *.js* file to load in the browser. Again, webpack is the best choice here. To drive this process from within Visual Studio using MSBuild, you need to do start from a Visual Studio template. At present, there is no ASP.NET template for Vue.js development in-the-box. -#### Modify the Webpack configuration to output the built files to wwwroot +#### Modify the webpack configuration to output the built files to wwwroot * Open the file *./client-app/config/index.js*, and change the `build.index` and `build.assetsRoot` to wwwroot path: @@ -104,7 +104,7 @@ To install the vue-cli npm module, open a command prompt and type `npm install - 1. On **Pre-build event command line**, type `npm --prefix ./client-app run build`. -#### Configure Webpack's output module names +#### Configure webpack's output module names * Open the file *./client-app/build/webpack.base.conf.js*, and add the following properties to the output property: @@ -146,7 +146,7 @@ These steps require vue-cli 3.0, which is currently in beta. }; ``` - The preceding code configures Webpack and sets the wwwroot folder. + The preceding code configures webpack and sets the wwwroot folder. #### Build with vue-cli 3.0 diff --git a/docs/javascript/tutorial-aspnet-with-typescript.md b/docs/javascript/tutorial-aspnet-with-typescript.md index 3e6fc0faefe..a3ae6102d99 100644 --- a/docs/javascript/tutorial-aspnet-with-typescript.md +++ b/docs/javascript/tutorial-aspnet-with-typescript.md @@ -114,7 +114,7 @@ Visual Studio opens your new project. The *outDir* option specifies the output folder for the plain JavaScript files that the TypeScript compiler transpiles. - This configuration provides a basic introduction to using TypeScript. In other scenarios, such as when using [gulp or Webpack](https://www.typescriptlang.org/docs/handbook/asp-net-core.html), you might want a different intermediate location for the transpiled JavaScript files instead of *wwwroot/js*. The location depends on your tools and configuration preferences. + This configuration provides a basic introduction to using TypeScript. In other scenarios, such as when using [gulp or webpack](https://www.typescriptlang.org/docs/handbook/asp-net-core.html), you might want a different intermediate location for the transpiled JavaScript files instead of *wwwroot/js*. The location depends on your tools and configuration preferences. 1. In Solution Explorer, right-click the project node and select **Add > New Folder**. Use the name *scripts* for the new folder. diff --git a/docs/javascript/tutorial-nodejs-with-react-and-jsx.md b/docs/javascript/tutorial-nodejs-with-react-and-jsx.md index 8a3219c50d3..511528b266c 100644 --- a/docs/javascript/tutorial-nodejs-with-react-and-jsx.md +++ b/docs/javascript/tutorial-nodejs-with-react-and-jsx.md @@ -46,7 +46,7 @@ Before you begin, here's a quick FAQ to introduce you to some key concepts: JSX is a JavaScript syntax extension typically used with React to describe UI elements. You must transpile JSX code to plain JavaScript before it can run in a browser. -- **What is Webpack?** +- **What is webpack?** Webpack bundles JavaScript files so they can run in a browser, and can also transform or package other resources and assets. Webpack can specify a compiler, such as Babel or TypeScript, to transpile JSX or TypeScript code to plain JavaScript. @@ -255,9 +255,9 @@ For this simple app, you add the new project files in the project root. For most This HTML page loads *app-bundle.js*, which contains the JSX and React code transpiled to plain JavaScript. Currently, *app-bundle.js* is an empty file. In the next section, you configure options to transpile the code. -## Configure Webpack and TypeScript compiler options +## Configure webpack and TypeScript compiler options -Next, you add Webpack configuration code to *webpack-config.js*. You add a simple Webpack configuration that specifies an input file, *app.tsx*, and an output file, *app-bundle.js*, for bundling and transpiling JSX to plain JavaScript. For transpiling, you also configure some TypeScript compiler options. This basic configuration code is an introduction to Webpack and the TypeScript compiler. +Next, you add webpack configuration code to *webpack-config.js*. You add a simple webpack configuration that specifies an input file, *app.tsx*, and an output file, *app-bundle.js*, for bundling and transpiling JSX to plain JavaScript. For transpiling, you also configure some TypeScript compiler options. This basic configuration code is an introduction to webpack and the TypeScript compiler. 1. In **Solution Explorer**, open **webpack-config.js** and add the following code. @@ -286,7 +286,7 @@ Next, you add Webpack configuration code to *webpack-config.js*. You add a simpl } ``` - The Webpack configuration code instructs Webpack to use the TypeScript loader to transpile the JSX. + The webpack configuration code instructs webpack to use the TypeScript loader to transpile the JSX. 1. Open **tsconfig.json** and replace the contents with the following code, which specifies the TypeScript compiler options: @@ -318,13 +318,13 @@ Next, you add Webpack configuration code to *webpack-config.js*. You add a simpl 1. In **Solution Explorer**, right-click the project name and select **Open Command Prompt Here**. -1. In the command prompt, enter the following Webpack command: +1. In the command prompt, enter the following webpack command: `node_modules\.bin\webpack --config webpack-config.js` The command prompt window shows the result. - ![Screenshot that shows results of running the Webpack command.](media/tutorial-nodejs-react-run-webpack-cmd.png) + ![Screenshot that shows results of running the webpack command.](media/tutorial-nodejs-react-run-webpack-cmd.png) If you see any errors instead of the preceding output, you must resolve them before your app will work. If your npm package versions are different than the versions this tutorial specifies, that can cause errors. To fix the errors, try the following: @@ -348,7 +348,7 @@ Next, you add Webpack configuration code to *webpack-config.js*. You add a simpl ![Screenshot showing a prompt whether to load modified files.](media/tutorial-nodejs-react-reload-files.png) -Anytime you make changes to *app.tsx*, you must rerun the Webpack command. To automate this step, you can add a build script to transpile the JSX. +Anytime you make changes to *app.tsx*, you must rerun the webpack command. To automate this step, you can add a build script to transpile the JSX. ### Add a build script to transpile the JSX @@ -465,7 +465,7 @@ The browser starts with debugging enabled. The app isn't running yet, so the bro }, ``` - This development-only setting enables debugging in Visual Studio. By default, Webpack references in the source map file include the *webpack:///* prefix, which prevents Visual Studio from finding the source file *app.tsx*. This setting overrides the generated references in the source map file, *app-bundle.js.map*, when building the app. Specifically, this setting changes the reference to the source file from *webpack:///./app.tsx* to *./app.tsx*, which enables debugging. + This development-only setting enables debugging in Visual Studio. By default, webpack references in the source map file include the *webpack:///* prefix, which prevents Visual Studio from finding the source file *app.tsx*. This setting overrides the generated references in the source map file, *app-bundle.js.map*, when building the app. Specifically, this setting changes the reference to the source file from *webpack:///./app.tsx* to *./app.tsx*, which enables debugging. 1. Select your target browser as the debug target in Visual Studio, and then press **Ctrl**+**F5**, or select **Debug** > **Start Without Debugging**, to run the app in the browser.