Vue项目打包成一个HTML文件包含CSSJSsvgpngttfeotwoff等

安装html-webpack-plugin插件

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

在webpack.config.js中引入插件

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

配置webpack.config.js文件

module.exports = {
  //...省略其他配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html', //指定模板文件路径
      filename: 'index.html', //生成的HTML文件名
      minify: {
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: true, //删除空白符和换行符
        removeAttributeQuotes: true //移除属性上的引号
      }
    })
  ]
}

执行npm run build打包命令，生成的dist目录下会有一个index.html文件，其中包含了所有的CSS、JS、svg、png、ttf、eot、woff等资源文件