How do YOU dynamically generate HTML files? Use the html-webpack-plugin.

HTML template

Install the html-webpack-plugin

HTML – webpack – the plugin installation

npm install --save-dev html-webpack-plugin

Adding a template File

Create the template directory in the SRC directory, and then create the index.html file in the template directory

SRC directory structure

SRC ├ ─ ─ CSS │ └ ─ ─ style.css. CSS ├ ─ ─ js │ └ ─ ─ app. Js └ ─ ─ the template └ ─ ─ index. The HTMLCopy the code

Index.html content

<! DOCTYPE html> <html lang="en">
<head>
	<meta charset="UTF-8">
	<title>webpack html</title>
</head>
<body>
	<div id="app"></div>
</body>
</html>
Copy the code

HTML – webpack – the plugin

Updated content of webapack.config.js

const path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development'.entry: './src/js/app.js'.output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/app.bundle.js'
    },
    module: {
        rules: [{test: /\.css$/.use: [{ loader: 'style-loader' }, { loader: 'css-loader'}}}]],plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html'.template: './src/template/index.html'}})];Copy the code

Plugins: WebPack plug-in configuration

new htmlWebpackPlugin({
    filename: 'index.html',
    template: './src/template/index.html',})Copy the code

Filename: indicates the name of the packaged file

Template: indicates the path of the template file

Run NPM run webpack

Browser to dist/index.html

Pass parameters to the HTML template

Html-webpack-plugin Other parameters

Updated content of webapack.config.js

const path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development'.entry: './src/js/app.js'.output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/app.bundle.js'
    },
    module: {
        rules: [{test: /\.css$/.use: [{ loader: 'style-loader' }, { loader: 'css-loader'}}}]],plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html'.template: './src/template/index.html'.title: 'this is webpack title'}})];Copy the code
new htmlWebpackPlugin({
    filename: 'index.html'.template: './src/template/index.html'.title: 'this is webpack title'
})
Copy the code

Title: user-defined parameter

Modified index. HTML

<! DOCTYPE html> <html lang="en">
<head>
	<meta charset="UTF-8">
	<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
	<div id="app"></div>
</body>
</html>
Copy the code

Run NPM run webpack

Browser to dist/index.html

conclusion

NPM install –save-dev html-webpack-plugin

HTML – webpack – the plugin

var htmlWebpackPlugin = require('html-webpack-plugin');
Copy the code

Module. exports added plugins to instantiate the htmlWebpackPlugin object

plugins: [
    new htmlWebpackPlugin({
        filename: 'index.html'.template: './src/template/index.html'.title: 'this is webpack title'})]Copy the code

Filename: indicates the name of the packaged file

Template: indicates the path of the template file

Other parameters, can pass parameters to the HTML templates, HTML template variable method is called < % = htmlWebpackPlugin. Options. The title % >

Think about:

How to package CSS and JS separately to generate different files?

Because the browser caches JS and CSS, you need to refresh the browser every time you modify the JS and CSS. How to package to generate different file names?

Please see theWebpack 4.x Field 4, JS and CSS are packaged separately