1.老的vue项目支持webpack打包
最近在学习Vue.js。版本是2.6，webpack的版本也相对较老，是2.1.0版本。项目脚手架只配置了npm run dev和npm run build。运行脚本如下：
"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配置也很简单，就是帮相应js文件打包成build.js，放在dist文件夹里面。webpack.config.js部分配置如下所示：
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
但是现在默认配置会把index.html文件默认也打包进dist文件夹中，但是当前webpack配置，没有实现。需要实现修改webpack配置完成该功能。
2.遇到问题
很容易想到使用html-webpack-plugin默认。在项目里面执行如下命令安装相应的npm模块。
npm install html-webpack-plugin --save-dev，然后执行打包命令npm run build。vs code终端报错显示如下，猜测可能原因安装该模块没有指定版本，到时和webpack 2.1.0版本不兼容。
3.解决方法
Google中使用Webpack TypeError: Cannot read property 'make' of undefined关键字进行搜索，有其他人遇到相同问题，也是通过安装特定的版本解决。重新安装3.2.0版本，命令如下：
cnpm install html-webpack-plugin@3.2.0 --save-dev
再次执行npm run build命令，输入结果如下图所示，构建成功。
打开dist文件中index.html查看内容，显示如下：
这个Webpack App页面标题肯定不是我们想要的，当然html-webpack-plugin插件也支持通过参数设置标题，只要修改配置如下所示就可以了。
4.使用腾讯云对象存储托管网站
构建成功之后，需要将前端dist文件里面的代码上传到对象存储上面。
部署成功如下图所示：
