When writing code, the js file under src is introduced. After webpack packaging, an entry file is formed. At this time, the name and path of the js file in html are wrong, so webpack needs to be packaged and the html file must be packaged. The path to the imported js file has been replaced.
The benefits of using webpack to package html are:
(1) The packaged js file can be automatically introduced into html
(2) After the html is packaged, it will still be generated in the build folder and put together with the packaged js file, so that when we go online You only need to copy the folders generated by packaging to the online environment
(3) It will help us compress html files.
1. Install the plug-in.
Webpack natively can only understand JS and JSON files, and it must support packaging other files. All types of files need to install the corresponding plug-in or loader.
If we need to package HTML files, we first need to install html-webpack-plugin plug-in:
npm install html-webpack-plugin -D
The role of this plug-in:
Create an html file under the export by default, and then import all JS/CSS resources.
We also You can specify an html file yourself and add resources to this html file.
2. Webpack.config.js configuration.
After installing html-webpack-plugin plug-in, you need to configure it in the webpack.config.js file:
// ...
// 1. Introduce the plug-in const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
// 2. Configure the plug-in plugins in plugins: [
new HtmlWebpackPlugin({
template: 'index.html', // Specify the entry template file (relative to the project root directory)
filename: 'index.html', // Specify the output file name and location (relative to the output directory)
// For other configuration items of the plug-in, you can view the official documentation of the plug-in})
]
} Detailed configuration link: https://www.npmjs.com/package/html-webpack-plugin
Make sure the path and file name of the entry template file are consistent with the configuration, and then you can compile.
3. When configuring multiple JS entries and multiple HTML situations
, multiple HTML files need to be compiled, and the files need to import different JS files. However, by default, the packaged HTML file will import all packaged JS files. We chunk can be specified to distribute JS.
const path = require('path');
// 1. Introduce the plug-in const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
// 2. Configure JS entry (multiple entries)
entry: {
vendor: ['./src/jquery.min.js', './src/js/common.js'],
index: './src/index.js',
cart: './src/js/cart.js'
},
//Configure export output: {
filename: '[name].js',
path: path.resolve(__dirname, 'build/js')
},
// 3. Configure plug-ins: [
new HtmlWebpackPugin({
template: 'index.html',
filename: 'index.html',
// Use chunk to specify which JS files to import chunk: ['index', 'vendor']
}),
// How many HTMLs need to be compiled, how many new plug-ins are needed new HtmlWebpackPlugin({
template: './src/cart.html',
filename: 'cart.html',
chunk: ['cart', 'vendor']
})
]
} Tip: What needs to be noted here is how many HTML files you need to compile, how many times you need to new
HtmlWebpackPlugin.
After the above configuration is successfully compiled, the output is as follows:
build
|__ index.html #Introduce index.js and vendor.js
|__ cart.html #Introduce cart.js and vendor.js
|__ js
|__ vendor.js # Generated by jquery.min.js and common.js |__ index.js # Generated by index.js |__ cart.js # Generated by cart.js for 1, webpack.config. js configuration
const HTMLWebpackPlugin = require('html-webpack-plugin')
...
plugins: [
// html-webpack-plugin html packaging configuration This plug-in will generate an HTML5 file for you new HTMLWebpackPlugin({
template: "./index.html", // Relative or absolute path packaged to the template (packaging target)
title: 'Home', // Title used for the generated HTML document hash: true, //true appends the unique webpack compilation hash to all included scripts and CSS files. Mainly used to clear cache,
minify: { // Compress html
collapseWhitespace: true, // Collapse white space keepClosingSlash: true, // Keep closed gaps removeComments: true, // Remove comments removeRedundantAttributes: true, // Remove redundant attributes removeScriptTypeAttributes: true, // Remove Script script type attributes removeStyleLinkTypeAttributes: true, // Delete the style link type attribute useShortDoctype: true, // Use the short document type preserveLineBreaks: true, // Preserve line breaks minifyCSS: true, // Compress in-text css
minifyJS: true, // Compress in-text js
}
}),
],
... 2. At this time our index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>webpackDemo</title>
</head>
<body>
<div id="app">
html packaging configuration</div>
</body>
</html> 3. At this time our index.js
import './../css/index.less'
function add(x,y) {
return x+y
}
console.log(add(2,3)); 3. Type the package in the console webpack and find that the package output file has an additional index.html, the content is as follows
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>webpackDemo</title>
<script defer src="index.js"></script></head>
<body>
<div id="app">
html packaging configuration</div>
</body>
</html> <script defer="" src="index.js"></script> is automatically introduced into
the browser to open the packaged output index.html. It is found that the style has an effect, and the control unit also outputs normally:
