1. Automatically generate HTML files

In the previous two articles, we need to manually add an index. HTML file under the dist folder to check the operation effect of the packing code after each package, and manually introduce the typed JS package into the file, which is very inconvenient. The HtmlWebpackPlugin simplifies the creation of HTML files, so it is commonly used in projects.

1. Install HtmlWebpackPlugin

npm i html-webpack-plugin -D

2. Use plug-ins

// webpack.config.js
module.exports = {
    entry: './src/index.js'.output: {
        filename: 'main.js'.path: path.join(__dirname, 'dist')},mode: 'development'.devServer: {
        port: 9000.contentBase: path.resolve(__dirname, './dist'),
        hot: true
    },
    module: {
        rules: [{test: /\.js$/,
                use: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: ['style-loader'.'css-loader'] {},test: /\.less$/,
                use: ['style-loader'.'css-loader'.'less-loader'] {},test: /\.(png|jpg|jpeg|gif)$/,
                use: 'file-loader',}},plugins: [
        // Use HtmlWebpackPlugin
        new HtmlWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]   
}

Copy the code

3. Pack and see

Delete the previously generated dist folder (make sure that each generated dist file is the latest and there are no previously generated irrelevant files). Then execute the build package command. The output is as follows

4. Other configuration items of HtmlWebpackPlugin

The default generated HTML file is shown above, but often this is not enough. HtmlWebpackPlugin also provides some options for configuring the generated HTML file. Here are only a few commonly used to demonstrate, more configuration items can be viewed in the plug-in documentation. HtmlWebpackPlugin options configuration item description document.

Modify the WebPack configuration:

.plugins: [
    new HtmlWebpackPlugin({
        // Generate HTML title, default is Webpack App
        title: 'Pick up code for the little girl in webpack World'.// Generate HTML file name, default is index.html
        filename: 'yeah.html'.// Generate HTML meta tag content
        meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'},
        // Generate HTML ICONS
        favicon: './src/imgs/favicon.ico'.// Modern browsers support non-blocking javascript loading to improve page launch performance. Defaults to defer
        scriptLoading: 'blocking'.If mode is production, the default value is true. If mode is production, the default value is false
        minify: false
    }),
    new webpack.HotModuleReplacementPlugin()
]   
Copy the code

Execute the build command (remember to delete the dist folder first) and the package results are as follows

5. Use the template to generate HTML files

The HtmlWebpackPlugin can be configured to generate HTML files that are relatively flexible, but still not personalized enough. So typically, our project uses the template configuration item to generate HTML files.

In the SRC directory, create the index.html template

<! DOCTYPEhtml>
<html lang="en">

<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>Pick up code for the little girl in the Webpack world</title>
</head>

<body>
    <div id="app"></div>
</body>

</html>
Copy the code

Modify webPack configuration items

new HtmlWebpackPlugin({
    template: path.join(__dirname, 'src/index.html')})Copy the code

After the build command is executed, the index.html file in the dist folder generated after packaging is generated using the index.html file in the SRC directory as the template.

2. Automatically clean up build catalog artifacts

In the previous example, we manually removed dist before each build, but WebPack also provides a plugin that automatically cleans up the build directory artifacts — the CleanWebpackPlugin

1. Install HtmlWebpackPlugin

npm i clean-webpack-plugin -D

2. Use plug-ins

// webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    ...
    plugins: [
        // Use the CleanWebpackPlugin
        new CleanWebpackPlugin(),
        // Use HtmlWebpackPlugin
        new HtmlWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]   
Copy the code

3. Static resources are inlined

1. Significance of static resource inlining

An inline resource is a resource that is inserted inline into another resource. Its significance can be analyzed from two aspects

  1. At the code level:
  • Initialization script for the page frame
  • Report relevant measures
  • The CSS is inlined to avoid page flashing
  1. At the request level:
  • Reduce the number of HTTP network requests
  • Inline small image or font (url-loader)

HTML and JS inline

1. Install the raw – loader

NPM [email protected] - I D

2. Use plug-ins

// src/meta.html
<meta name="keywords" content="Little girl picking up code.">
<meta name="format-detection" content="telephone=no">
<meta name="description" itemprop="description" content="Webpack dry goods column, come and watch!">
<meta name="name" itemprop="name" content="Webpack advanced">


// src/index.html
<! DOCTYPEhtml>
<html lang="en">
<head><%= require('raw-loader! ./meta.html') %><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>Pick up code for the little girl in the Webpack world</title>
    <script>< % =require('raw-loader! babel-loader! ./test.js') % ></script>
</head>
<body>
    <div id="app"></div>
</body>

</html>
Copy the code

Results 3.

Turn on element review, static resources are properly inlined