Node.js html-webpack-plugin的使用

tml-webpack-plugin是导入在内存中生成 HTML 页面的 插件。
作用：
1.自动在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部
2. 自动，把打包好的 bundle.js 追加到页面中去
使用cnpm i html-webpack-plugin -D命令 安装

注：
只要是插件，都一定要放到 plugins 节点中取

webpack.config.js文件

const path = require('path')
const webpack = require('webpack');

var htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: path.join(__dirname, './src/main.js'),
  output: { 
    path: path.join(__dirname, './dist'), 
    filename: 'bundle.js' 
  },
  devServer: {  
    open: true,   
    port: 3000, 
    contentBase: 'src',  
    hot: true  
  },
  plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'), // 指定模板文件路径
      filename: 'index.html' // 设置生成的内存页面的名称
    })
  ]
}

使用 npm run dev 命令运行项目

注：
如果没有安装 cnpm
输入 npm install -g cnpm --registry=https://registry.npm.taobao.org 命令安装