vue webpack 專案搭建環境（沒寫完）

一、搭建環境

安裝node.js

npm init初始化專案

npm install webpack vue vue-loader css-loader  安裝依賴包

如果提示要安裝 vue-template-complier，npm install vue-template-complier即可。 

安裝 syle-loader url-loader file-loader

sass less 自行配置和安裝。

專案根目錄新建webpack.config.js檔案

const path = require('path')

module.exports=,
module:,,,
}]
}]}}

import vue from 'vue'

const root = document.createelement('div')
new vue().$mount(root)

scriptx下加  「build」:"webpack --config webpack.config.js"

命令列執行 npm run build 即可打包檔案

注意：安裝依賴包過程中，有碰到依賴包版本不一致的問題，比如webpack 4.x版本以上要安裝webapck-cli

安裝過程有可能報要清快取的錯，執行 npm cache clean --force 即可。

webpack-dev-server 配置

npm i webpack-dev-server

vue webpack環境搭建

vue專案搭建依賴node的npm包管理器，所以我們先得安裝node，此處就不詳細講解其安裝過程。npm install g vue cli安裝成功後可以輸入vue檢視相關命令的使用，輸入vue list可以檢視vue可以用的模板 我們這裡選擇webpack模板 vue init webpack p...

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選項。陣列中加入不需要打包的元件...