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版本不兼容。
![](https://imgkr2.cn-bj.ufileos.com/473d7eb6-6984-4584-8c26-c4ce5cb99a54.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=%252B7I4Bu2Z8wXgSV1fcwO85cp1TNo%253D&Expires=1597032649)
3.解决方法
Google中使用Webpack TypeError: Cannot read property 'make' of undefined
关键字进行搜索,有其他人遇到相同问题,也是通过安装特定的版本解决。重新安装3.2.0版本,命令如下:
cnpm install html-webpack-plugin@3.2.0 --save-dev
![](https://imgkr2.cn-bj.ufileos.com/6edf8f29-edee-49a1-84ed-4938dce853e2.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=xxcHd7tXGkVbBtP0mVYSa53x4Ts%253D&Expires=1597032797)
再次执行npm run build
命令,输入结果如下图所示,构建成功。
打开dist文件中
index.html
查看内容,显示如下:
![](https://imgkr2.cn-bj.ufileos.com/6a765e94-4768-41f4-b9aa-a9d60aa1b05d.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=sHHsX4L4srbP7MvoXvjMBTDQ2Jk%253D&Expires=1597032938)
这个Webpack App页面标题肯定不是我们想要的,当然html-webpack-plugin插件也支持通过参数设置标题,只要修改配置如下所示就可以了。
![](https://imgkr2.cn-bj.ufileos.com/2ebfb3a4-63cc-415b-bbde-45d4ee41a23b.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=v8QCj%252BfcBZlauC95szHGnL484lw%253D&Expires=1597033009)
4.使用腾讯云对象存储托管网站
构建成功之后,需要将前端dist文件里面的代码上传到对象存储上面。
![](https://imgkr2.cn-bj.ufileos.com/958d81fb-f4a5-4d75-b985-a690e3a57695.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=NNBSlq%252FGzt%252BsbnI5xtg53DsmMFs%253D&Expires=1597033196)
部署成功如下图所示:
![](https://imgkr2.cn-bj.ufileos.com/6f6fde0f-6a26-4e92-ad8f-d1455b5381be.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=S9uHWCSUNvL%252FT2JN33HZeYJLoKE%253D&Expires=1597033694)