webpack configuration (step 4: html (Advanced))

If you need to read (basic chapter), please move to: https://my.oschina.net/u/3797834/blog/1649157

webpack.config.js file

const path = require('path');
let htmlwebpackplugin = require('html-webpack-plugin');//Introducing HTML webback plugin plug-in 

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']
			    }
			},
        ]
    }
    ,
 	plugins: [
 		//new a template comes out, this one doesn't use chunks
  		new htmlwebpackplugin({
	        template: './app/home.html',//Entrance file
	        filename:  'home1.html',//Output document
		}),
 		//new a template
  		new htmlwebpackplugin({
	        template: './app/home.html',//Entrance file
	        filename:  'home2.html',//Output document
	        chunks  : ['main'],//You can set chunks to import JS files on demand. If you do not set it, all the output JS will be imported
	        chunksSortMode: 'manual',//Sort chunks in the order they were introduced. Otherwise, JS introduced to html may be disorderly
		})
 	]
    
};
module.exports=export_html;	

Look at plugins here


 		//new a template comes out, this one doesn't use chunks        
        new htmlwebpackplugin({
	        template: './app/home.html',
	        filename:  'home1.html',// home1.html will be generated
		}),
 		//new a template
  		new htmlwebpackplugin({
	        template: './app/home.html',
	        filename:  'home2.html',//home2.html will be generated
	        chunks  : ['main'],//Note: the values in chunks are corresponding to the key name of the entry entry
	        chunksSortMode: 'manual',
		})

home.html file in app directory

_home1.html file in build directory

_home2.html file in build directory

As you can see, home1.html introduces two JS files, and main1.js is in front of main.js,

home2.html only introduces the specified main.js;

In chunks of home2.html, add: main1

//new a template
  		new htmlwebpackplugin({
	        template: './app/home.html',//Entrance file
	        filename:  'home2.html',//Output document
	        chunks  : ['main',"main1"],//You can set chunks to import JS files on demand. If you do not set it, all the output JS will be imported
	        chunksSortMode: 'manual',//Sort chunks in the order they were introduced. Otherwise, JS introduced to html may be disordered
		})

Because in chunks, main is before main1, so the imported files follow this order;

The problem of order is mainly attributed to this attribute

chunksSortMode: 'manual',//Sort chunks in the order they were introduced. Otherwise, JS introduced to html may be disordered

further more:

Every time, new is very troublesome, so write a function to simplify the process

let get_html = function(name,chunk){//encapsulation
    return {
        template: './app/ejs for html/'+ name + '.ejs',
        filename:  name+ '.html',
        chunks  : ['main',chunk||name],//You can set chunks to import JS files on demand. If you do not set it, all the output JS will be imported
        chunksSortMode: 'manual',//Sort chunks in the order they were introduced
        inject  : true,
        hash    : true,
		xhtml	: true
    }
};

Then test new in plugin;

At this point, webpack.config.js:

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/'+ name + '.html',
        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,//Avoid caching
		xhtml	: true //Standardize html writing
    }
};

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']
			    }
			},
        ]
    }
    ,
 	plugins: [
 		//new a template to test
  		new htmlwebpackplugin(get_html("home","main1"))
 	]
    
};
module.exports=export_html;	

Result:

Success!

Tags: Webpack Attribute Javascript

Posted on Wed, 01 Apr 2020 04:32:02 -0700 by gfoot