That view will end up creating a HTML template with a h2 tag that wraps the text ‘This is the home page’, and a p tag that wraps the text “It’s a test view”. Now that you’ve done that in your Express app, you can add a template into your views directory as views/home.pug and fill it in: h2 This is the home page Then you can set the view engine to pug when you initialize your app, then make a get call and render your view: const express = require ( 'express' ) const app = express ( ) To install Pug and use it in our Express app, we have to use npm to install it first: $ npm install pug In this breakdown, we’ll introduce the basic syntax and uses of Pug, EJS, and Mustache. However, the default Jade installed in Express is still using the old version. The default template engine found in Express is Jade, which is now known as Pug. There’s a wide variety of template engines that work with Express. Inside the src folder create a new index.pug file and then create a simple layout inside it.If you’d like to learn more about Express, follow this link. Npm i -D pug pug-loader html-webpack-pluginĢ.
pug module : read pug files pug-loader: returns the file’s content as template function so we can interpolate data in our template html-webpack-plugin: will get the index.pug file from src folder and using the other two loaders will emit a new index.html file in the dist folder. Create a file: index.pug with some dummy data. Install pug, pug-loader, html-webpack-plugin. Next let’s make webpack to read pug files and to load them in the distribution folder. Even if we don’t need it for this short tutorial, it’s good to know how you can do it. With this, we defined an entry and output point for our application, the port for the development server and we created a simple boilerplate to figure it out whether we run the the webpack command in production or development mode. In order to do this differentiation between production and development, then we must write in the following way const path = require('path') const config = If we want to run the webpack command both in development mode and production mode using our scripts then we must create a separate config object with the common configuration and then based on the arguments of the webpack command we will add diferent rules.
0 kommentar(er)
