webpack4配置vue项目----6.html-webpac

这是一篇webpack4配置的系列文章，推荐从头开始看起
1.初始化
2.关于执行环境process.env.NODE_ENV
3.设置mode和sourceMap
4.加载css, scss文件，以及样式抽离
5.加载图片等文件
6.html-webpack-plugin插件
7.单vue文件的加载，以及babel的使用
8.配置devServer服务器，热更新，前端跨域代理
9.设置目录别名
10.css样式前缀自动补全
11.public公共静态资源目录拷贝
12.清理dist目录

HtmlWebpackPlugin用于生成html文件，并为html文件引入js，css等相关的外部资源

安装html-webpack-plugin

npm install --save-dev html-webpack-plugin

webpack.config.js中使用

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            title: 'myWebpack',
            fileName: 'index.html',
            template: './public/index.html',//在public目录下创建一个index.html文件，并作为模板
        }),
    ],
};

这时可以npm run build运行一下，打包完成后，查看dist目录下是否有一个index.html文件，是否引入了相关的外部资源