1. 程式人生 > >Webpack+Vue構建專案步驟

Webpack+Vue構建專案步驟

第一步:單純的搭建出來我們的專案,並且通過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

指令: