"Nodejs+gulp+webpack Basic Combat" course notes (eight)--templating development Walkthrough: Detaching a Common header file

Let's start by installing the plugins you need for this lesson:

NPM install raw-loader--save-dev// Example: var header = require ("xxx.html"), the HTML content will be read out

　　This is a webpack loader that can return a file as if it were a string.

Here are two ways to use the loader:

1. Write in our webpack config file

{test:/\.html$/,loader: "Loader name"}// This means that all HTML suffixes will use this loader to handle

2. Call the loader when require

Require ("Loader name!xxx.html");

Here, we will also use three ways to load a common header file:

The first type: direct require (XXX) in Login.js, and then insert it using jquery.

// var GetHeader = require ("raw!. /.. /.. /tpl/header.include "); // $ ("#header"). Append (GetHeader);

The second type: Write the <%=require ("raw!xxx.html")%> directly on the page.

<%=require ("raw!. /header.include ")%>.

Third: Using Nodejs code <%=htmlWebPackPlugin.options.xxx%>

New Htmlwebpackplugin ({

Here's a random variable name: Read the file here with the FS module.

})

include:{           header:require (' FS '). Readfilesync ("./src/tpl/head.include")          }

<%=htmlWebpackPlugin.options.include.header%>

"Nodejs+gulp+webpack Basic Combat" course notes (eight)--templating development Walkthrough: Detaching a Common header file