参考

HtmlWebpackPlugin

---

HtmlWebpackPlugin

在webpack中使用HtmlWebpackPlugin来帮助打包html文件，并输出一个包含所有编译打包后的资源的HTML5文件到dist目录下；

---

配置

1.创建本地项目webpack-demo

mkdir webpack-demo
cd webpack-demo

2.在webpack-demo的根目录下创建package.json文件

npm init -y

3. 安装webpack依赖包

npm i webpack webpack-cli webpack-dev-server --save-dev

模块说明：

• webpack
webpack核心

• webpack-cli
webpack的脚手架（启动器）

• webpack-dev-server
  开发环境下用于实时加载依赖

4.修改package.json文件的scripts属性值,进行打包资源的配置

"scripts": {
    "dev": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production"
  },

5.安装插件

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

6.在webpack.config.js文件中进行配置

const path = require('path');
// 显示进程的完成进度
var ProgressBarPlugin = require('progress-bar-webpack-plugin');
// 设置进度字体颜色
const chalk = require('chalk');
// 以树图的方式展示打包后的文件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// 输出html
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'production',
  entry: {
    app: './src/app.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].[hash].min.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {loader: 'babel-loader'}
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack Study Demo',
      filename: 'index.html',//指定生成的HTML文件名
      template: path.join(__dirname, './public/index.html') // 指定模板路径
    }),
    new ProgressBarPlugin({
      format: chalk.green('Progressing') + '[:bar]' + chalk.green(':percent') + '(:elapsed seconds)',
      clear: false
    }),
    new BundleAnalyzerPlugin()
  ]
}

7.结果展示