Vue老项目支持Webpack打包

最近在学习 Vue.js，接触了一个基于 Vue 2.6 的老项目。该项目使用的是较早期的 Webpack 2.1.0 版本，脚手架配置非常简洁，仅包含两个 npm 脚本：

1
2
3
4
"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}

webpack.config.js 中的打包配置也很基础，主要将入口文件 ./src/main.js 打包为 dist/build.js：

1
2
3
4
5
6
entry: './src/main.js',
output: {
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  filename: 'build.js'
},

然而，这种配置存在一个问题：构建后不会自动生成或复制 index.html 到 dist 目录中。这在现代前端工程化流程中几乎是必需的——我们需要一个入口 HTML 文件来加载打包后的 JS 和 CSS。

一、引入 html-webpack-plugin

很自然地想到使用 html-webpack-plugin 插件来解决这个问题。于是执行以下命令安装：

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

但运行 npm run build 后，终端报错：

1
TypeError: Cannot read property 'make' of undefined

经过排查，发现问题根源在于：最新版的 html-webpack-plugin 与 Webpack 2 不兼容。该插件从 v4 开始要求 Webpack 4+，而我们的项目仍停留在 Webpack 2.1.0。

二、指定兼容版本解决问题

通过 Google 搜索关键词 “Webpack TypeError: Cannot read property ‘make’ of undefined”，发现不少开发者遇到相同问题。解决方案是：安装与 Webpack 2 兼容的旧版本插件。

查阅插件的版本历史后，确认 v3.2.0 是最后一个支持 Webpack 2 的版本。于是重新安装指定版本：

1
cnpm install [email protected] --save-dev

注：使用 cnpm 是为了加速国内 npm 包下载，也可替换为 npm 或 yarn。

再次执行构建命令：

1
npm run build

构建成功！dist 目录下生成了 index.html 和 build.js。

三、自定义 HTML 模板与页面标题

默认生成的 index.html 内容如下：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script type="text/javascript" src="build.js"></script>
  </body>
</html>

显然，“Webpack App” 这个标题不是我们想要的。好在 html-webpack-plugin 支持丰富的配置选项。我们可以在 webpack.config.js 中进行如下配置：

1
2
3
4
5
6
7
8
9
10
11
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 在 plugins 数组中添加：
plugins: [
  new HtmlWebpackPlugin({
    title: '我的 Vue 应用', // 自定义页面标题
    template: './src/index.html', // 可选：使用自定义模板
    filename: 'index.html',
    inject: true
  })
]

如果项目根目录或 src 下已有 index.html，建议将其作为模板传入，以保留原有结构和 meta 信息。

四、部署到腾讯云对象存储（COS）

构建完成后，整个前端静态资源位于 dist 目录。我们可以将其上传至 腾讯云对象存储（COS），并开启“静态网站”功能，实现快速托管。

操作步骤简要如下：

  1. 登录 腾讯云控制台；
  2. 创建一个存储桶（Bucket），地域建议选择靠近用户的位置；
  3. 开启“静态网站”功能，设置索引文档为 index.html；
  4. 使用 COS 提供的上传工具或 SDK，将 dist 目录全部文件上传至 Bucket；
  5. 访问分配的静态网站域名，即可看到部署成功的页面。

提示：为提升访问速度，可配合 CDN 加速，并配置自定义域名。

五、总结

在维护老旧 Vue 项目时，经常会遇到依赖版本兼容性问题。本次通过指定 [email protected] 版本，成功解决了 Webpack 2 环境下无法生成 index.html 的问题，并实现了自定义标题与模板。最后，借助腾讯云 COS 快速完成静态站点部署。

虽然这些“老技术栈”看似过时，但在实际企业项目中仍广泛存在。掌握如何在限制条件下优雅地解决问题，正是前端工程师的重要能力之一。

参考链接

希望这篇整理对你有帮助！如果你也在维护类似的老旧项目，欢迎留言交流经验 😊

技术
#Vue #Webpack
Vue老项目支持Webpack打包
https://blog.liangbenshu.cn/2020/08/09/old-vue-project-support-webpack/
作者
liminjun
发布于
2020年8月9日
许可协议