webpack打包vue-cli项目之package.json与build.js

使用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部分。