webpack-bundle-analyzer

webpack可視化插件，用來查看一共打了多少個包，每個包的體積和包里面的情況。
啟動查看

npm run build --report

結果報錯npm ERR! missing script: build，后來發(fā)現package.json中scripts參數為

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
    "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
    "lint": "eslint --ext .js,.vue src",
    "test": "npm run lint"
  },

所以正確的命令應該為

npm run build:prod --report

訪問地址：http://localhost:8888/

image.png

解釋一下這個scripts對象，npm 允許在package.json文件里面，使用scripts字段定義腳本命令。