基于Vue-cli使用webpack進行打包
準備
1、使用vscode
安裝vetur窒悔、eslint粒氧、Live Server、HTML CSS Support
JavaScript Snippet pack敞临、HTML snippets态辛、path Intellisense
2、安裝node.js
3.配置npm在安裝全局模塊時的路徑和緩存cache的路徑
因為在執(zhí)行例如npm install webpack -g等命令全局安裝的時候挺尿，默認會將模塊安裝在C:\Users\用戶名\AppData\Roaming路徑下的npm和npm_cache中奏黑，不方便管理且占用C盤空間，
所以這里配置自定義的全局模塊安裝目錄编矾，在node.js安裝目錄下新建兩個文件夾 node_global和node_cache
然后在cmd命令下執(zhí)行如下兩個命令：
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
執(zhí)行完后熟史，配置環(huán)境變量，如下：
- “環(huán)境變量” -> “系統(tǒng)變量”：新建一個變量名為 “NODE_PATH”窄俏， 值為“D:\Program Files\nodejs**node_global\node_modules**”以故，如下圖：
- “環(huán)境變量” -> “用戶變量”：編輯用戶變量里的Path，將相應(yīng)npm的路徑（“C:\Users\用戶名\AppData\Roaming\npm”）改為：“D:\Program Files\nodejs\node_global”裆操，如下：
配置完成怒详。
然后在cmd命令下執(zhí)行 npm install webpack -g 安裝webpack ,檢查webpack -v
詳情請看https://www.cnblogs.com/aizai846/p/11441693.html
4炉媒、安裝命令行工具
npm install -g vue-cli
-g表示全局安裝, vue-cli是模塊,全局安裝的模塊可以在命令行直接使用.
安裝后在命令行輸入 vue -version 能看到版本號表示全局安裝成功,下面就可以使用命令行創(chuàng)建項目了
5、創(chuàng)建項目框架
vue init webpack my-project
創(chuàng)建一個基于"webpack"的項目,后面是項目名,
按照提示輸入,項目名,項目描述,項目作者 等等,看到最后這句項目就創(chuàng)建好了,
執(zhí)行 vue init webpack my-project 注意（my-project）是自己的項目名
回車既可昆烁，等待加載配置
注意y表示yes吊骤，n表示no
？ Project name ( my-project ) 敲y, 回車既可
静尼？project description ( A Vue.js project ) 敲回車既可
白粉？Author ( xxxxxx <xxxxx@xx.com> ) 敲回車既可
？ Vue build ( user arrow Keys ) 敲回車既可
? Install vue-router鼠渺？（Y/n）敲Y回車既可 （是否安裝路由）
鸭巴？Use ESLint to lint your code？ (Y/n) 敲n回車既可（是否安裝路由）
拦盹？Set up unit tests (Y/n) 敲n回車既可 ( 單元測試鹃祖， 個人覺得不安裝選擇n )
？Setup e2e tests with Nighwatch普舆？(Y/n) ( e2e測試恬口，個人覺得不安裝選擇n )
？Should we run `npm install` for you after the project has been created沼侣？ (recommended) (use arrow Keys)
這里是選擇安裝方式
等待安裝即可
項目結(jié)構(gòu):這是安裝了依賴以后的截圖,沒安裝依賴以前是沒有node_modules文件夾的
6祖能、運行
安裝成功！找到當個創(chuàng)建的那個文件
npm run dev 運行
在瀏覽器訪問localhost:8080
目錄結(jié)構(gòu)：
build蛾洛、config:webpack的配置文件
node_modules:安裝工程所需要的依賴
src：源碼目錄
static：靜態(tài)資源
index.html模板頁养铸，因為vue是模塊化開發(fā) 所以一般不會寫html，寫的是.vue文件轧膘，在打包編譯的時候會自動生成.html
style scoped表示當前的style只在當前組件生效
webpack介紹
是一個現(xiàn)代javaScript應(yīng)用程序靜態(tài)模塊打包器
相對于java的萬物皆對象來說钞螟，webpack萬物皆模塊
1、由來
由于前端之前js扶供、css筛圆、圖片文件需要單獨進行壓縮和打包裂明，這樣團隊人員處理很繁瑣椿浓，然后 Instagram 團隊就想讓這些工作自動化，然后webpack應(yīng)運而生闽晦。
2扳碍、介紹
webpack是一個模塊打包器（module bundler），webpack視HTML仙蛉，JS笋敞，CSS，圖片等文件都是一種 資源 荠瘪，每個資源文件都是一個模塊（module）文件夯巷，webpack就是根據(jù)每個模塊文件之間的依賴關(guān)系將所有的模塊打包（bundle）起來赛惩。
遵循commonsJs規(guī)范，該規(guī)范核心思想是允許模塊通過require方法來同步加載所需的依賴的其他模塊趁餐，然后通過exports 或者module.exports來導(dǎo)出需要暴露的接口
3喷兼、使用
1、創(chuàng)建兩個js后雷，將hello.js看成一個組件季惯，模塊并將內(nèi)容暴露出去
2、在mian.js中去引用臀突，相當于java的導(dǎo)包
并引用hello.js中的sayhai
3勉抓、寫好了兩個js還是不能馬上使用的，要使用webpack的配置候学，內(nèi)容從文檔中cp下來,下面是簡單的配置
module.exports = {
entry : './modules/main.js', // 入口文件
output : {
filename : './js/bundle.js' //打包之后輸出的文件名
}
};
4藕筋、寫好之后，cmd進入到文件目錄下進行打包
webpack 打包好后生成合并的js盒齿，在html中引用則可以使用
