看過我vue.js系列課程的人，基礎會的就都該會了，進階牛B點的也很牛B了，但是對vue這一塊我還是會持續有新的想法和學習到的東西我還是會一直進行分享，但是今天又是一個史上的文章出來了，雖然有點標題黨，但是我看了一系列的教程，就是講其一，其二最重要的就是直接忽略，有些教程直接就是把vue-cli給把功能標註一下，幾個字告訴你是大概幹麻的，就算跟着大概意思的理解，我也能知識大概是幹麻的，本質上並沒有luan用。有些就是當作比筆記記記，更可恨的就是一系列教學收費視頻，看了就是一坨屎，我就不一一點名了，怕別人告我說影響別人生意，我可以說我是用心去給大家分享，雖然沒有一毛錢，我把我自己能力所及的鑽研出來的一絲不掛的分享給大家，關鍵做人要有口碑。https://juejin.im/post/58ea59afac502e4957c794f9
首先我們先去蕩一個最新的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
