详解html-webpack-plugin用法全解

下面就来详细讲解一下“详解html-webpack-plugin用法全解”的完整攻略。

简述

html-webpack-plugin是Webpack插件中一个非常重要的插件，其作用是根据Webpack打包生成的js文件，在生成的html文件中自动生成对应的script标签引入js文件，并提供额外的功能，如html模板参数、多页面配置等。

安装

html-webpack-plugin是一个npm包，可以通过npm或者yarn进行安装。

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

或者

yarn add --dev html-webpack-plugin

配置

在Webpack配置文件中引入插件并进行基本的配置。下面以一个简单的示例项目为例。

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 入口文件
  entry: {
    main: './src/index.js'
  },
  // 输出目录及文件名
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  // 插件
  plugins: [
    // 自动生成html文件，并自动引入js文件
    new HtmlWebpackPlugin({
      title: 'My App',
      template: './src/index.html'
    })
  ]
};

上述示例中配置了一个HtmlWebpackPlugin插件，其中：

• title：生成的html文件的标题，会被插入到<title>标签中。
• template：生成的html文件的模板，可以是一个html文件，也可以是一个ejs模板。

高级配置

多页面配置

html-webpack-plugin支持多页面配置，即可在同一个项目中生成多个html文件。

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 入口文件
  entry: {
    main: './src/index.js',
    about: './src/about.js'
  },
  // 输出目录及文件名
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  // 插件
  plugins: [
    // 自动生成html文件，并自动引入js文件
    new HtmlWebpackPlugin({
      title: '首页',
      template: './src/index.html',
      filename: 'index.html',
      chunks: ['main']
    }),
    new HtmlWebpackPlugin({
      title: '关于我们',
      template: './src/about.html',
      filename: 'about.html',
      chunks: ['about']
    })
  ]
};

上述示例中配置了两个HtmlWebpackPlugin插件，分别用于生成index.html和about.html文件，其中：

• filename：生成的html文件名，可以自定义文件名。
• chunks：要插入的js文件列表，可以传入多个值，即可插入多个js文件。

使用模板参数

html-webpack-plugin中支持使用模板参数，设置模板中的变量，在生成的html文件中会自动替换为具体的值。

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 入口文件
  entry: {
    main: './src/index.js'
  },
  // 输出目录及文件名
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  // 插件
  plugins: [
    // 自动生成html文件，并自动引入js文件
    new HtmlWebpackPlugin({
      title: '首页',
      template: './src/index.html',
      filename: 'index.html',
      templateParameters: {
        title: 'My App',
        message: 'Hello, World!'
      }
    })
  ]
};

上述示例中在HtmlWebpackPlugin插件的配置中增加了templateParameters属性，用来设置模板中的变量。

在模板文件中使用<%= title %>和<%= message %>即可获取到具体的值。

结语

到这里为止，html-webpack-plugin的完整攻略讲解就结束了。希望可以帮助到大家。