史上最詳細的 webpack 講解 1 （vue-cli 中 build.js）

做者 : 混元霹靂手-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