html-webpack-plugin使用

1、安装

1	cnpm i webpack-plugin -D

2、在webpack.config.json中引用

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

const path = require('path') const htmlWebpackPlugin = require('html-webpack-plugin') //第一步 module.exports = {     entry: path.join(__dirname, './src/main.js'),     output: {         path: path.join(__dirname, './dist'),         filename: 'bundle.js',     },     mode: 'development',     devServer: {         open: true,         port: 8080,         hot: true,         contentBase: 'src'     },     plugins: [         new htmlWebpackPlugin({ //第二步@ www.xuepai.net         template: path.join(__dirname, './src/index.html'), //指定生成模板的路径         filename: 'index.html' //指定生成页面的名称@ www.haoshilao.net         })     ] }

3、html-webpack-plugin的作用

一、在内存中生成一个指定模板的文件，在访问时速度更快
二、自动为指定模板文件添加bundle.js文件