webpack configuration (step 4: html (template))

Posted by jkeppens on Sun, 05 Apr 2020 18:14:51 +0200

First look at the project structure:

Create a new ejs directory under app, and the suffix of html file will naturally become ejs;

The ejs file in the ejs directory is the principal file,

In the generate directory, the spliced files are placed,

The public directory places public files.

Configuration premise:

Introducing EJS loader

$ cnpm install ejs ejs-loader

Add:

            ,
            { 
            	test: /\.ejs$/, 
            	loader: 'ejs-loader?variable=data' 
            }

webpack.config.js:

Because the introduced file becomes an ejs file, webpack.config.js should also make corresponding changes;

The path and suffix of template have been changed, and content has been added to loaders

const path = require('path');
let htmlwebpackplugin = require('html-webpack-plugin');//Introducing HTML webback plugin plug-in 
let get_html = function(name,chunk){//encapsulation
    return {
        template: './app/ejs/generate/'+ name + '.ejs',//Changed path and suffix here!!!
        filename:  name+ '.html',
        chunks  : ['main',chunk||null],//Here, the common file main.js is introduced, and another file is introduced on demand. Of course, the value of this file can also be set as an array, and the second value of the incoming function can be used as an array
        chunksSortMode: 'manual',//Sort chunks in the order they were introduced
        inject  : true,//All JavaScript resources are inserted at the bottom of the body element
        hash    : true,
		xhtml	: true
    }
};

let export_html= {
    entry:  {
    	main:__dirname+"/app/js/main.js",//Entrance file
    	main1:__dirname+"/app/js/main1.js",//Entrance file
    },
    output: {
        path: __dirname+"/_build/",
        filename: "js/[name].js",//Output file. The name is determined according to the entry file key name of the entry
    },
    module: {
        loaders: [
			{
			    test: /(\.jsx|\.js)$/,
			    loader: 'babel-loader',
			    query: {
			      presets: ['es2015']
			    }
			}
            ,
            { 
            	test: /\.ejs$/, 
            	loader: 'ejs-loader?variable=data' 
            }
        ]
    }
    ,
 	plugins: [
 		//new a template to test
　　		new htmlwebpackplugin(get_html("home","main1"))
 	]
    
};
module.exports=export_html;

Contents of files in the directory:

app/ejs/public/head.ejs

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <link rel="shortcut icon" type="image/x-icon" href="" />
    <title>hello!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>

app/ejs/public/foot.ejs

	<footer id="footer" :choose="choose">
    	<section><div></div></section>
    	<section><div></div></section>
    	<section><div><span v-model="addnumber" :value="addnumber"></span></div></section>
    	<section><div></div></section>
    </footer>
    </body>
</html>

app/ejs/home.ejs

<body>
    <p>hello,nice to meet u!</p>

app/ejs/generate/home.ejs

<%= require("../public/head.ejs")() %>
<%= require("../home.ejs")() %>
<%= require("../public/foot.ejs")() %>

This file introduces the above three files, and then this will be the entry file of htmlwebpackplugin

webpack let's see what's generated,

_build/home.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <link rel="shortcut icon" type="image/x-icon" href="" />
    <title>hello!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
//Note: the above is the content of the head.ejs file
<body>
    <p>hello,nice to meet u!</p>
//Note: above is the content of home.ejs
//Note: here is the content of foot.ejs
	<footer id="footer" :choose="choose">
    	<section><div></div></section>
    	<section><div></div></section>
    	<section><div><span v-model="addnumber" :value="addnumber"></span></div></section>
    	<section><div></div></section>
    </footer>
    <script type="text/javascript" src="js/main.js?a2847a8b5f38621da2fb"></script><script type="text/javascript" src="js/main1.js?a2847a8b5f38621da2fb"></script></body>
</html>

Success!

Topics: Webpack Vue Javascript

Programmer Think

webpack configuration (step 4: html (template))

Hot Topics