webpack-bundle-analyzer

webpack可視化插件，用來(lái)查看一共打了多少個(gè)包，每個(gè)包的體積和包里面的情況。
啟動(dòng)查看

npm run build --report

結(jié)果報(bào)錯(cuò)npm ERR! missing script: build，后來(lái)發(fā)現(xiàn)package.json中scripts參數(shù)為

  "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"
  },

所以正確的命令應(yīng)該為

npm run build:prod --report

訪問(wèn)地址：http://localhost:8888/

image.png

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