1.老的vue專案支援webpack打包

最近在學習Vue.js。版本是2.6，webpack的版本也相對較老，是2.1.0版本。專案腳手架只配置了npm run dev和npm run build。執行指令碼如下：

"scripts":{
"dev":"cross-envNODE_ENV=developmentwebpack-dev-server--open--inline--hot",
"build":"cross-envNODE_ENV=productionwebpack--progress--hide-modules"
},

webpack.config.js配置也很簡單，就是幫相應js檔案打包成build.js，放在dist

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

3.解決方法

Google中使用Webpack TypeError: Cannot read property 'make' of undefined關鍵字進行搜尋，有其他人遇到相同問題，也是通過安裝特定的版本解決。重新安裝3.2.0版本，命令如下：

[email protected]

再次執行npm run build命令，輸入結果如下圖所示，構建成功。

開啟dist檔案中index.html

這個Webpack App頁面標題肯定不是我們想要的，當然html-webpack-plugin外掛也支援通過引數設定標題，只要修改配置如下所示就可以了。

4.使用騰訊雲物件儲存託管網站

構建成功之後，需要將前端dist檔案裡面的程式碼上傳到物件儲存上面。

部署成功如下圖所示：

4.幫助連結

1. Webpack TypeError: Cannot read property 'make' of undefined問題
2. 設定靜態網站