Warehouse addresses for the examples used in this article:gayhub

In the previous section, I mentioned that Webpack can only handle Javascript files, which is obviously not suitable for everyday use, so Webpack provides loader and plugins configuration options to extend the processing type of Webpack. The HtmlWebpackPlugin described in this section is a plug-in specially used to process and generate HTML files.

Due to the late update of plugins and Loaders documents on Webpack Chinese website, if you are in doubt, please click “Read the original text” in the upper right corner of the document to view the English document.

The installation

Install the HtmlWebpackPlugin into the project. This section project expands on the example project from the previous section.

yarn add html-webpack-plugin -D
Copy the code

HtmlWebpackPluginIt is only used for Webpack packaging and not for project running dependencies, so put it inpackage.json 的 devDependenciesRepresents a development dependency.

The basic use

HtmlWebpackPlugin is used with a precondition that the current project already has webPack dependency installed. You can see it in the peerDependencies section of node_modules/html-webpack-plugin/package.json.

If you can’tnode_modules/Find it in directorywebpackPackaging will report an errorCannot find module 'webpack/lib/node/NodeTemplatePlugin'

  1. Install Webpack in your project

    yarn add webpack -D
Copy the code

    Since you already have Webpack installed globally, you can also link global Webpack dependencies to the sample project using NPM Link Webpack. This is not recommended because Link does not add dependencies to your project’s package.json, so when you give the configuration to someone else, they will still report an error.

  2. Add the basic configuration of HtmlWebpackPlugin to webpack.config.js

    webpack.config.js

    const path = require('path')
// +++
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development'.entry: './src.js'.output: {
    filename: 'dist.js'.// modified
    path: path.resolve(__dirname, './dist')},// +++
  plugins:[
    new HtmlWebpackPlugin()
  ]
}
Copy the code

  3. packaging

    webpack
Copy the code

    You can see that two files are generated under the generated dist/ directory: The contents of dist. Js and index.html and dist. Js are the same as in the previous section. Index.html is generated by HtmlWebpackPlugin.

    index.html

    
        
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="dist.js"></script></body>
</html>
Copy the code

Commonly used configuration

This section explains why such an HTML file is generated at the top through the configuration of the HtmlWebpackPlugin.

  • Filename Specifies the name of the HTML file to be generated. The default value is index.html

    For the reason that index.html was generated above, you can modify it like this:

    new HtmlWebpackPlugin({
  filename: 'app.html'
})
Copy the code

  • Title Generates the content of the title tag in an HTML file, default Webpack App

    The reason for the

    Webpack App in index.html, you can modify it like this: 

    new HtmlWebpackPlugin({
  title: 'my app'
})
Copy the code

  • Chunks are introduced to generate HTML files, default to all non-lazy load generated files

    Index.html you can modify it like this:

    new HtmlWebpackPlugin({
  chunks: [] // No build files are loaded
})
Copy the code

  • Template generates htML-based templates

    Sometimes we want to store an index.html file in the project root directory to make static references easier. This is when we need to use the template configuration item. The resulting HTML file will incorporate imports from template and other configuration/plug-in generated imports.

    const path = require('path')
new HtmlWebpackPlugin({
  template: path.resolve(__dirname, 'index.html')})Copy the code

  • ChunksSortMode controls the import sequence of HTML file resources. The default value is auto

    none | auto | dependency | manual | {Function}

    In general, the default values are used. However, some WebPack 3X projects upgrade to WebPack 4x with a cyclic dependency error, which does not actually affect the project and can be very annoying to check, so you may need to set it to None under certain circumstances. This is definitely not a suggestion, but it may be necessary.

  • Minify generates HTML compression related configurations, true when mode: Production and false otherwise

    But of course you can also do more detailed configuration:

    new HtmlWebpackPlugin({
  minify: {
    collapseWhitespace: true.removeComments: true.removeRedundantAttributes: true.removeScriptTypeAttributes: true.removeStyleLinkTypeAttributes: true.useShortDoctype: true}})Copy the code

    It is less useful in the current popular front-end frameworks (vue/React/Angular)