Vue老项目支持Webpack打包

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文件里面的代码上传到对象存储上面。

部署成功如下图所示：

4.帮助链接

1. Webpack TypeError: Cannot read property 'make' of undefined问题
2. 设置静态网站