打包html js为一个文件,在vue-cli中如何将所有js以及css打包成一个js文件

在 Vue CLI 中，可以使用 webpack 的配置来打包 HTML、JS、CSS 为一个文件。具体的做法如下：

1. 打开 `vue.config.js` 文件，如果没有该文件则需要在项目根目录下创建该文件。
2. 在 `module.exports` 中新增配置项 `configureWebpack`，该项为一个对象，用来配置 webpack 的配置项。
3. 在 `configureWebpack` 中新增配置项 `optimization`，该项为一个对象，用来配置 webpack 的优化选项。
4. 在 `optimization` 中新增配置项 `minimizer`，该项为一个数组，用来配置 webpack 的代码压缩插件。
5. 在 `minimizer` 数组中新增配置项 `terser`，该项为一个插件实例，用来压缩 JS 代码。
6. 在 `terser` 中新增配置项 `terserOptions`，该项为一个对象，用来配置 terser 插件的选项。
7. 在 `terserOptions` 中新增配置项 `output`，该项为一个对象，用来配置输出的 JS 文件名。
8. 在 `output` 中新增配置项 `filename`，该项为一个字符串，用来配置输出的 JS 文件名。可以将所有 JS 文件打包成一个文件，例如 `filename: 'bundle.js'`。

完整的代码如下：

module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            output: {
              filename: 'bundle.js'
            }
          }
        })
      ]
    }
  }
}

这样打包后，所有的 JS 和 CSS 代码都会被打包到 `bundle.js` 中。同时，HTML 文件中也会自动引用该 JS 文件。