webpack配置html-webpack-plugin

配置html-webpack-plugin生成预览页面

• ① 运行 npm i html-webpack-plugin -D安装生成预览页面的插件
• ② 修改webpack.config.json 文件头部区域如下：

const path = require('path')
const html_webpack_plugin = require('html-webpack-plugin')
const html_plugin = new html_webpack_plugin({
    template:'./src/index.html',
    filename:'index.html'
})

module.exports = {
    // 编译模式
    mode: 'development',
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    devServer: {
        static: {                               
          directory: path.join(__dirname, './'),  
          watch: true
        }
     },
     plugins:[html_plugin]
}

template指定要生成的模板文件
filename指定生成文件的名称，由webpack编译在内存中
plugins数组是webpack打包期间会用到的一些插件列表
完成以上配置后，运行npm run dev命令启动项目，即可直接显示模板页面