Webpack+Vue構建專案步驟
阿新 • • 發佈:2019-01-25
第一步:單純的搭建出來我們的專案,並且通過webpack打包一個bundle.js然後執行起來
步驟:
1、建立專案必要的檔案和資料夾(見截圖)
2、配置webpack.develop.config.js,指定入口,輸出檔案
3、在main.js中寫程式碼,App.vue中寫程式碼
4、讓我們的專案能執行App.vue
5、打包執行我們的專案
webpack--config webpack.develop.config.js ===>bundle.js
建立template.html 在裡面匯入bundle.js
在瀏覽器中執行,即可看到效果
第二步:對我們開發階段的一個優化(更改原始碼就能看到效果)
全域性包:webpack-dev-server
本地包:webpack-dev-server html-webpack-plugin
1、html-webpack-plugin 在記憶體中,根據參照檔案(template.html)生成index.html,注意:模版檔案中不需要再自己寫程式碼匯入bundle.js
用法見截圖
2、webpack-dev-server 在記憶體中生成一個bundle.js
webpack-dev-server對node封裝,執行index.html
指令: