看过我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
