史上最详细的 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