webpack学习笔记（六）—— 如何把index.html像bundle.js那样 也放入电脑内存中【html-webpack-plugin】

一 安装html-webpack-plugin插件

npm i html-webpack-plugin -D

二 配置webpack.config.js

①导入html-webpack-plugin

②配置这个插件

//这个配置文件，其实就是一个JS文件，通过node中的模块操作，向外暴露了一个配置对象
const path = require("path"); //node.js中的路径

const webpack = require('webpack');//引入webpack 
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  //手动指定入口和出口
  entry: path.join(__dirname, "./src/main.js"), //入口，表示要使用webpack打包哪个文件
  output: {
    //输出文件相关的配置
    path: path.join(__dirname, "./dist"), //指定打包好的文件，输出到哪个目录中去
    filename: "bundle.js" //这是指定输出的文件的名称
  },
  devServer: {
    open: true,//自动打开浏览器
    port: 3000,//设置运行端口
    contentBase: "src",//指定托管的根目录
    hot: true//启用热更新
  },
  plugins:[//配置插件的节点
    new webpack.HotModuleReplacementPlugin(), //new 一个热更新的模块对象
    new htmlWebpackPlugin({//创建一个在内存中生成HTML页面的插件
        template:path.join(__dirname,'./src/index.html'),//指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
        filename:'index.html', //指定生成的页面的名称

    })

  ]
};

注：

html-webpack-plugin  的两个作用

①自动在内存中根据指定页面生成一个内存中的页面

②自动把打包好的bundle.js追加到页面中去