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' // 設定生成的記憶體頁面的名稱
    })
  ]
}