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' // 设置生成的内存页面的名称
    })
  ]
}