使用vue-cli搭建项目的人都知道,都知道下面这两个命令。其实这两个命令的源头就在package.json里面。
# npm run dev
# npm run build
这个文件里有这么一段,尤其是scripts部分。这里的dev和build就是上面这两个命令里的dev和build。
"name": "learn",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "jusang",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
也就是说,上面这两个命令等价于下面这两条命令。敲击上面的命令时,细心留意,也可以看到下面这两条命令出现。
# webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
# node build/build.js
因此接下来就要分析build.js文件。
// 调用rm方法,第一个参数的结果就是 dist/static,表示删除这个路径下面的所有文件
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
// 如果删除的过程中出现错误,就抛出这个错误,同时程序终止
if (err) throw err
// 没有错误,就执行webpack编译
// !! 这里是关键
// !! 在这里进行打包操作,打包的选项由webpackConfig确定。webpackConfig在
webpack(webpackConfig, (err, stats) => {
// 后面的省略 都是一些日志的输出和 样式
在上面的代码中,webpack()方法正式进行打包,我们重点关注的是打包参数,这个打包参数从webpack.prod.conf.js文件中导入,由两部分组成,包括base部分和 prod部分。