作者 : 混元霹靂手-Ziksang
看過我vue.js系列課程的人，基礎會的就都該會了，進階牛B點的也很牛B了，但是對vue這一塊我還是會持續有新的想法和學習到的東西我還是會一直進行分享，但是今天又是一個史上的文章出來了，雖然有點標題黨，但是我看了一系列的教程，就是講其一，其二最重要的就是直接忽略，有些教程直接就是把vue-cli給把功能標註一下，幾個字告訴你是大概幹麻的，就算跟著大概意思的理解，我也能知識大概是幹麻的，本質上並沒有luan用。有些就是當作比筆記記記，更可恨的就是一系列教學收費視訊，看了就是一坨屎，我就不一一點名了，怕別人告我說影響別人生意，我可以說我是用心去給大家分享，雖然沒有一毛錢，我把我自己能力所及的鑽研出來的一絲不掛的分享給大家，關鍵做人要有口碑。
首先我們先去蕩一個最新的vue-cli下來，我相信這個真不要講了吧！
然後開啟vue-cli中build/build.js。講一個webpack我覺得還是拿一個成熟的cli工具來講，那是最好的，不但可以學到尤總配置的精髓，還可以有一種貫穿性的認識。
我什麼都不要我只要
贊
我們自己建一個跟vue-cli一樣的目錄結構，我們不用建的那麼祥細，就先簡單的弄幾個，今天先搞這麼多，一點一點學，看下面我建的目錄結構
新建根目錄ZkWebpack資料夾
開啟cmd 進行ZkWebpack執行
init -y
你會發現會出來一個package.json這裡面初始配置了一些作者名等一系列東西，這者不主要，但需要這個東西,最重要的就是我們要配置一個東西
vue-cli是通過npm run build來執行打包的，原理是什麼？
是通過package.json裡的script指令碼來進行配置的
"scripts": {
"build": "node build/build.js"
},複製程式碼當我們執行npm run build的時候，本質上執行了node build/build.js檔案
接下來我們新建src/main.js
這裡面我們今天什麼都不放就放一個程式碼
main.js
alert('月薪過萬不是夢')複製程式碼接下來是主角build/build.js
const webpack = require("webpack");
const rm = require('rimraf')
const ora = require('ora');
const path = require('path')
const chalk = require('chalk');
const spinner = ora({
color: 'green',
text: '正為生產環境打包，耐心點，不然自動關機。。。'
})
spinner.start()
rm(path.resolve(__dirname, '../dist/js'), (err) => {
if (err) throw err
webpack({
entry: './src/main.js',
output: {
path: path.resolve(__dirname, '../dist/js'),
filename: 'ziksang.js',
}
}, (err, stats) => {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n')
// style a string
console.log(chalk.blue('好訊息！'));
// compose multiple styles using the chainable API
console.log(chalk.blue.bgRed.bold(' 程式碼已經打包成功，上線吧'));
})
})複製程式碼因為webpack2.0支援了es6的語法，所以大膽用
一步一步來分析，首先const webpack = require("webpack");
我們把webpack模組包給加進入
我們平時在webpack.config.js的時候就是通過命令列執行 webpack，webpack會自動會找webpack.config.js這個資料夾來進行Compiler,我只能說弊端太多了，如果要配置開發環境，生產環境那就不行了，其實這個東西就是一個入門的例子
我們先試一下這麼配
webpack({
entry:'./src/main.js',
output: {
path: path.resolve(__dirname, '../dist/js'),
filename: 'ziksang.js',
}
},(err,stats)=>{})複製程式碼大膽的執行一下，你會發現在多出了一個dist目錄和一個ziksang.js
這裡有幾個坑，憋過我一個多小時
1.這裡的入口檔案在2.0裡講究上下文環境，context預設情況下就是根目錄就是zkWebpack根目錄，所以你會很奇怪，本質上我們應該取到./src.main.js應該向上跑一層目錄
2.我們執行了webpack()雖然程式碼是執行了，但是dist目錄檔案不會出來，比較坑。大家這兩個一定要注意了。
3.output裡的path路徑我們一定要絕對路徑，因為環境不一樣，有些環境執行不起來，所以也要注意，那我們這裡用到了path，path是Node的路徑模組，那我這裡又要說了webpack裡整合了node一些api模組，所以我們這時候用到path的時候要const path = require('path')要把路徑模組也加進來
我們就能看到打包的結果，那跟vue-cli的不一樣因為，他對打包結果進行一些配置化
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n')複製程式碼 以上就是一些配置化，如果打包的時候有錯誤我們就丟擲錯誤，我們可以在webpack()回撥裡拿到一個stats打包狀態，process.stdout.write跟console.log一個意思因為在node環境裡console.log也是用process封裝的就是向cli裡列印輸出。但是輸出的時候進行了一些格式化。
colors ： 讓打包的時候有顏色。
module : 去掉內建模組資訊
children ：去掉子模組
chunks : 增加包資訊（設定為 false 能允許較少的冗長輸出）
chunkModules : 去除包裡內建模組的資訊
我們此時再執行一下會發現
漂亮多了！！！！！！！！
去除先前的打包
const rm = require('rimraf')
這個模組是用來清除之前的打的包，因為在vue-cli中每次打包會生成不同的hash,每次打包都會生成新的檔案，那就不對了，我們要覆蓋原先的檔案，因為hash不同覆蓋不了，所以要清除
rm(path.resolve(__dirname, '../dist/js'), (err) => {}複製程式碼記住rm()裡面的路徑一定要是絕對路徑。相對路徑不會冊除成功的
打包開始提示
const ora = require('ora');
這東西你看看原始碼，其實沒什麼東西，就是對cli進行輸出一個帶spinner的文案，告訴使用者正在打包中
const spinner = ora({
color: 'green',
text: '正為生產環境打包，耐心點，不然自動關機。。。'
})
spinner.start()複製程式碼可以對spinner的色彩和文案進行配置，然後再呼叫start()方法進行開始
記住在打包結束回撥裡我們要再次進行關閉 spinner.stop(),不然會一直spinner著，不傳的轉啊轉
因為程式碼量太少，我抓不到那個截圖，你們可以自己看
色彩樣式提示
在vue-cli打包結束的時候會提示使用者，要在http下開啟index.js不然顯示不出來對文字進行了色彩改變，我也可以做一些提示
console.log(chalk.blue('好訊息！'));
console.log(chalk.blue.bgRed.bold(' 程式碼已經打包成功，上線吧'));複製程式碼
其實這樣一看你就知道他的生產檔案如何利用webpack編譯出來的。大概整個build框架出來了，學vue我們一定要從基礎往深看，學webpack我們要從大往小看，這才能學得更好，我們持續更新。。。。。。。支援我混元霹靂手ziksang
渣渣前端開發工程師，喜歡鑽研，熱愛分享和講解教學， 微信 zzx1994428 QQ494755899
支援我繼續創作和感到有收穫的話，請向我打賞點吧
如果轉載請標註出自@混元霹靂手ziksang