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