專案沒有使用vue-cli建立目錄，自己搭建，我們先學會如何建立整個專案；
1.先隨便找個地方建立乙個資料夾，起個名字吧：vue-webpack ;
使用npm init 先建立乙個packge.json ;
2. 區域性安裝webpack（注意，請使用webpack3.0版本，不要用最新的4.0版本），vue ，vue-loader;
3.第二步的時候出現了warn 警告資訊，那麼來處理一下，
<
template
>
<
div>}
div>
template
>
<
script
>
export
default }
}script
>
<
style
>
style
>
5.上面的專案是沒法直接執行的，我們繼續在專案目錄vue-webpack下建立：webpack.config.js檔案
const
path
=require(
"path");
module.
exports=,
module: ]
} }6.在 src目錄下建立index.js 檔案；
import
vuefrom
"vue"
import
from
const
root
=document.
createelement(
"div");
document.body.
newvue().
$mount(root);
7.修改我們一開始建立的package.json 檔案：增加 「build」：「webpack。。。。省略」（如下）,
"author":
"","license":
"isc",
"dependencies": }
8.全部完成之後目錄結構如下：
，我們這裡使用3.0.0版本）
10.命令執行之後，目錄多出來乙個dist 資料夾，裡面還有我們的目標檔案 bundle.js
11,接下來我們測試執行一下就可以了，
測試步驟：在dist資料夾下建立index.html檔案，引入我們的bundle.js檔案：
<
html>
<
head>
<
meta
>
<
title
>this is test file
title
>
head>
<
body>
<
script
src=
"bundle.js"
>
<
/script
>
body>
html>
然後瀏覽器開啟這個網頁：
好了，這就是乙個最簡單的完整的vue+webpack例項了；
vue webpack專案優化
方法為 在webpack的公共配置檔案 一般為webpack.base.conf.js 的resolve下有extensions選項。陣列中加入不需要打包的元件，並且在入口的html中使用cdn的方式引入即可，此時會發現打包出來的vender包會變小很多。我自己的示例為 所謂的非同步載入元件，其實就...
vue webpack專案優化
總結為 1 打包優化 2 非同步載入 3 頁面載入時加loading特效 4 點選延遲 5 inline manifest 6 邏輯 優化 方法為 在webpack的公共配置檔案 一般為webpack.base.conf.js 的resolve下有extensions選項。陣列中加入不需要打包的元件...
Vue webpack專案構建模板
package.json 匯入包的資訊及scripts配置 執行npm start自動打包編譯 啟動瀏覽器 熱更新 devdependencies scripts keywords author license isc description webpack.config.js 配置檔案。const...