Vue项目打包成单个HTML文件

昨天碰到一个新的需求，将Vue项目打包成单个HTML文件。

因为Vue项目默认是打包成一个dist文件夹，带有css，js，fonts文件，现需要打包成单独的HTML文件。

用到两个插件：

html-webpack-plugin, html-webpack-inline-plugin

npm下载：

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

更改router路由引入方式：

由

{
    path: '/index',
    component: () => import('@/views/index/Index.vue')
}

更改为：

import Index from '@/views/index/Index.vue')

{
    path: '/index,
    component: Index
}

更改vue.config.js配置文件：

module.exports = {
  publicPath: '',
  chainWebpack: config => {
    config.plugin('preload')
      .tap(args => {
        args[0].fileBlacklist.push(/\.css/, /\.js/)
        return args
      })
    config.plugin('inline-source')
      .use(require('html-webpack-inline-source-plugin'))
    config
      .plugin('html')
      .tap(args => {
        args[0].title = '正负面清单'
        args[0].inlineSource = '(\.css|\.js$)'
        return args
      })
  },
  productionSourceMap: false,
  devServer: {
    https: false
  }
}

执行npm run build报错，好像是版本问题

查看webpack版本：4.46.0
把插件卸载后重新安装，最后安装版本：

"html-webpack-inline-source-plugin": "^0.0.10",
"html-webpack-plugin": "^4.0.0",

执行npm run build，报错：没有找到cache-loader

百度原因，说要重新安装所有依赖。于是删除node_modules, 执行 npm install ，再执行 npm run build

无效

执行 npm install cache-loader， npm run build
成功打包