webpack學習系列(一)：package.json相關

一、package.json屬性說明

    name - 包名.
    version - 包的版本號。
    description - 包的描述。
    homepage - 包的官網URL。
    author - 包的作者，它的值是你在https://npmjs.org網站的有效賬戶名，遵循“賬戶名<郵件>”的規則，例如：zhangsan <[email protected]>。
    contributors - 包的其他貢獻者。
    dependencies / devDependencies - 生產/開發環境依賴包列表。它們將會被安裝在 node_module 目錄下。
    repository - 包代碼的Repo信息，包括type和URL，type可以是git或svn，URL則是包的Repo地址。
    main - main 字段指定了程序的主入口文件
    keywords - 關鍵字
    scripts - 指定了運行腳本命令的npm命令行縮寫。如 npm start、npm run dev、npm run build等

package.json 中添加中文註釋會編譯出錯

二、生成package.json文件

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (node_modules) runoob                   # 模塊名
version: (1.0.0) 
description: Node.js 測試模塊(www.runoob.com)  # 描述
entry point: (index.js) 
test command: make test
git repository: https://github.com/runoob/runoob.git  # Github 地址
keywords: 
author: 
license: (ISC) 
About to write to ……/node_modules/package.json:      # 生成地址

{
  "name": "runoob",
  "version": "1.0.0",
  "description": "Node.js 測試模塊(www.runoob.com)",
  ……
}

Is this ok? (yes) yes

三、安裝package.json的依賴文件

通過命令 npm install 或 npm install --save -dev 安裝依賴，將所需模塊安裝到node-modules目錄下。
–save-dev表示將安裝devDependencies屬性裏的模塊。比如，你寫 ES6 代碼，如果你想編譯成 ES5 發佈那麼 babel 就是devDependencies。如果你用了jQuery，由於發佈之後還是依賴jQuery，所以是dependencies。

源碼如下

{
  "name": "webpack-app",
  "version": "1.0.0",
  "description": "webpack app description",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --devtool hot --progress --colors --cate",
    "dev1": "webpack --config webpack.config.js --devtool hot --progress --colors --cate",
    "build": "webpack --config webpack.config_build.js -p  --cate",
    "build:watch": "webpack --config webpack.config_build.js -p --watch --cate"
  },
  "repository": {
    "type": "git",
    "url": ".."
  },
  "author": "luckykun",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "axios": "^0.16.2",
    "babel-cli": "^6.24.1",
    "babel-core": "^5.8.38",
    "babel-loader": "^5.4.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2016": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "better-scroll": "^1.4.0",
    "canvas2image": "^1.0.5",
    "css-loader": "^0.14.5",
    "dom-to-image": "^2.6.0",
    "eslint": "^4.7.0",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.3.0",
    "extract-text-webpack-plugin": "~1.0.1",
    "jsx-loader": "^0.13.2",
    "koa": "^2.3.0",
    "koa-body": "^2.3.0",
    "koa-router": "^7.2.1",
    "less": "^2.7.2",
    "less-loader": "^4.1.0",
    "mockjs": "^1.0.1-beta3",
    "node-libs-browser": "^0.5.2",
    "node-sass": "^4.10.0",
    "postcss-loader": "^0.11.0",
    "qrcode.react": "^0.8.0",
    "react-lazyload": "^2.3.0",
    "react-router": "^2.7.0",
    "redux-devtools": "^3.4.0",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.12.4",
    "url-loader": "^0.5.6",
    "vconsole": "^3.2.0",
    "webpack": "^1.9.11",
    "webpack-dev-server": "^1.15.0"
  },
  "dependencies": {
    "canvas2image": "^1.0.5",
    "classnames": "^2.2.5",
    "echarts": "^3.8.5",
    "echarts-for-react": "^2.0.15-beta.0",
    "es6-promise": "^4.1.1",
    "fecha": "^2.3.3",
    "fetch-jsonp": "^1.1.1",
    "file-loader": "^2.0.0",
    "html2canvas": "^1.0.0-alpha.12",
    "isomorphic-fetch": "^2.2.1",
    "material-ui": "^1.0.0-beta.47",
    "qrcode.react": "^0.8.0",
    "rc-animate": "^2.4.4",
    "rc-queue-anim": "^1.2.0",
    "rc-tween-one": "^2.2.7",
    "react": "^15.6.2",
    "react-addons-css-transition-group": "^15.6.2",
    "react-copy-to-clipboard": "^5.0.1",
    "react-countup": "^4.0.0-alpha.6",
    "react-countup-light": "^1.0.4",
    "react-dom": "^15.3.1",
    "react-fastclick": "^3.0.2",
    "react-iscroll": "^1.1.4",
    "react-pull-to-refresh": "^1.1.1",
    "react-pullload": "^1.0.7",
    "react-redux": "^5.0.6",
    "react-scroll": "^1.7.10",
    "react-swipeable-views": "^0.12.8",
    "react-transition-group": "^2.4.0",
    "reactjs-iscroll": "^0.3.2",
    "redux": "^3.7.2",
    "swiper": "^4.4.2",
    "whatwg-fetch": "^2.0.3"
  }
}

這裏的入口文件是webpack配置文件—webpack.config.js