webpack安装及配置（二）

---

7. webpack + vue项目配置文件详解

学习一个东西我们可以使用 5w1h的方式：

	概念
why	为什么要学习这个东西
what	要学的东西是什么
who	这个东西谁来用
when	什么时候用
where	在哪里用
how	怎么用

如此，我们便能对想要学习的东西有一个清晰的认识

7.1 package.json

why：

7.1.1 name：名称字段；version：版本号

概念：名称字段就相当于名字，如果作为要发布的程序包，那么名称字段和版本字段都是必填的，两者共同构成一个唯一标识符；否则两者只是可选字段；
注意：：名称 <= 214个字符，不能以 “.” 或 “_” 开头，不能有大写字母，必须是URL允许的字符，不能使用node已使用的（类似关键字）；

7.1.2 description：描述；

概念：可以在其中添加对本程序包的描述，这是一个字符串，而且可以帮助我们使用 npm search 来查找我们想要功能的包；

7.1.3 author：作者

7.1.4 private：

概念：如果在package.json中设置"private": true，则npm将拒绝发布它，这样是为了防止意外发布私有库方法；

7.1.5 scripts：脚本

概念：scripts是一个字典，包含在包运行生命周期各个时间段运行的脚本命令，简单来说，scripts里包含的key-value对中，key代表事件（代名词），value代表运行的命令；

7.1.6 dependencies：项目依赖

概念：dependencies是一个简单的用来匹配包名和版本范围的项目，其中之所以叫版本范围，是因为这里的 value 字符串不只是可以填写如 “1.1.0” 这样的单一版本号（常用），还可以是由符号标识或空格描述的字符串，也可以是压缩包或git URL ；
这里我们要区分dependencies和devDependencies，dependencies是配置项目运行所必须的依赖，即生产环境依赖，devDependencies则是配置测试打包等依赖，即开发环境依赖；通过npm install --save moduleName 命令即可将要安装的模块信息写入项目依赖中；npm install则会将生产和开发依赖都下载下来。

版本范围格式	含义
version	必须version完全匹配
>version	必须大于 version
>=version
<version
<=version
~version	大约等同于版本（详见下方示例代码）
^version	与版本兼容（详见下方示例代码）
1.2.x
http://…	URL作为依赖（详见下方示例代码）
*	匹配任何版本
“”	（只是一个空字符串）与 * 一样
version1 - version2	>=version1 <=version2
range1 || range2	如果满足range1或range2，则通过
git…	Git URL作为依赖
user/repo
tag	A specific version tagged and published as tag See npm-dist-tag
path/path/path	请参阅下面的本地路径

"dependencies": {
  "foo": "1.0.0 - 2.9999.9999",
  "bar": ">=1.0.2 <2.1.2",
  "baz": ">1.0.2 <=2.3.4",
  "boo": "2.0.1",
  "qux": "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0",
  "asd": "http://asdf.com/asdf.tar.gz",  //http路径
  "til": "~1.2",    //等于~1.2.0，与1.2.x相同
  "elf": "~1.2.3",  //与1.2.x相同
  "test":"~1",		//等于~1.0.0，与1.x相同
  "two": "2.x",
  "thr": "3.3.x",
  "lat": "latest",
  "dyl": "file:../dyl"  //本地路径
}

Git URL作为依赖项，Git网址的格式为：

<protocol>://[<user>[:<password>]@]<hostname>[:<port>][:][/]<path>[#<commit-ish> | #semver:<semver>]

<protocol>是以下之一git，git+ssh，git+http，git+https，或 git+file。
如果#提供，它将用于精确克隆该提交。如果commit-ish的格式为#semver:，则可以是任何有效的semver范围或确切版本，并且npm会在远程存储库中查找与该范围匹配的任何标记或引用，这与注册表依赖项很相似。如果未指定#或#semver:，则master使用。

例子：

git+ssh://git@github.com:npm/cli.git#v1.0.27
git+ssh://git@github.com:npm/cli#semver:^5.0
git+https://isaacs@github.com/npm/cli.git
git://github.com/npm/cli.git#v1.0.27

7.1.7 devDependencies：仅用于开发中的依赖

概念：开发中使用的打包测试等工具，并不需要其他人使用此项目是同样下载，所以放在此代码块中，里面的key-value用法和dependencies相似，使用npm install --save-dev moduleName命令即可将要安装的模块信息写入开发依赖中；

7.1.8 engines：引擎版本

概念：这里用来指定引擎版本，通常是node和npm，value值即版本可以像dependencies中一样；

7.1.9 browserslist：浏览器版本控制

  "browserslist": [      //注意这是一个数组对象
    "> 1%",			     //全球>1%的人使用
    "last 2 versions",   //最新两个版本内
    "not ie <= 8"        //ie版本不能 <= 8
  ]

7.1.10 package.json模板

{
  "name": "xc-ui-pc-sysmanage",
  "version": "1.0.0",
  "description": "xc-ui-pc-sysmanage",
  "author": "mrt",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "cnpm": "^5.2.0",
    "echarts": "^3.3.2",
    "element-ui": "^2.0.10",
    "js-base64": "^2.4.3",
    "js-md5": "^0.7.3",
    "jwt-decode": "^2.2.0",
    "mint-ui": "^2.2.3",
    "moment": "^2.18.1",
    "postcss": "^6.0.21",
    "postcss-url": "^7.3.1",
    "vue": "^2.5.2",
    "vue-resource": "^1.3.0",
    "vue-router": "^3.0.1",
    "vuex": "^2.0.0-rc.6"
  },
  "devDependencies": {
    "autoprefixer": "^7.2.6",
    "axios-mock-adapter": "^1.7.1",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-jest": "^21.0.2",
    "babel-loader": "^7.1.1",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.1",
    "babel-preset-env": "^1.3.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^2.0.1",
    "chromedriver": "^2.35.0",
    "copy-webpack-plugin": "^4.0.1",
    "cross-spawn": "^5.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^3.19.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-html": "^3.0.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eventsource-polyfill": "^0.9.6",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "jest": "^21.2.0",
    "jest-serializer-vue": "^0.3.0",
    "less": "^2.7.2",
    "less-loader": "^4.0.3",
    "mockjs": "^1.0.1-beta3",
    "nightwatch": "^0.9.12",
    "node-notifier": "^5.1.2",
    "node-sass": "^4.7.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "rimraf": "^2.6.0",
    "sass-loader": "^6.0.3",
    "selenium-server": "^3.0.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "url-loader": "^0.5.8",
    "vue-jest": "^1.0.2",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.12.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^2.11.5",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

7.2 webpack.base.conf.js

常用解析如下，请细细阅读（可通过左右箭头滑动查看代码）
webpack.base.conf.js通常是用来配置入口、出口文件及路径，简化文件/模块的引用，loader。

'use strict'      //使用js严格模式

//引入模块
//require命令的基本功能是，读入并执行一个JavaScript文件，然后返回该模块的exports对象。如果没有发现指定模块，会报错。
//const定义的变量不可以修改，而且必须初始化，如果用var就不必一定初始化
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

// 获取根目录的方法
function resolve (dir) {
  return path.join(__dirname, '..', dir)     //__dirname ：获得当前执行文件所在目录的完整目录名，即如果main.js调用，那么__dirname就是main.js的绝对路径
}                                            //path.join （只连接，不解析，形成路径）将路径片段使用特定的分隔符（如\）连接起来形成路径，并规范化生成的路径

//声明模块要暴露的内容
//module.exports 对象是由模块系统创建的，在我们写模块的时候，需要在模块最后写好模块接口，声明这个模块对外暴露什么内容，module.exports提供了暴露接口的方法
module.exports = {
  context: path.resolve(__dirname, '../'), //context所设置的路径，就是给entry提供路径前部分拼接；path.resolve （连接并解析，形成绝对路径），从右往左解析拼接
                                           //解析：如果当前路径以"/"开头，则不会拼接前面的路径，因为"/"已经是绝对路径；如果以"./"或不带符号开头，则拼接前面的路径；如果以"../"开头，则拼接前面路径的同时，去掉前面路径的最后一节路径
  //定义入口文件
  entry: {
    app: './src/main.js'    //这里我们只用拼接context提供的路径前段，加上app的value值提供的后段
  },                        //例如，调用文件为main.js，那么context就是 根目录/src - src = 根目录，app实际目录就是 根目录/src/main.js

  //定义输出路径
  output: {
    //webpack输出的目标文件夹路径
    path: config.build.assetsRoot,
    //webpack输出bundle文件命名格式
    filename: '[name].js',
    // 静态资源路径，分下列两种情况
    // 在开发环境下，路径为根目录
    // 在生产环境下，路径为根目录下的static文件夹
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

  //resolve 配置 Webpack 如何寻找模块所对应的文件
  resolve: {
    //自动解析扩展名，以下扩展名的文件引用时不用写扩展名
    extensions: ['.js', '.vue', '.json'],
    //配置别名，避免在结构嵌套过深的情况下出现../../../../xxx这种写法，方便引用
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'scss_vars': '@/statics/css/vars.scss'
    }
  },

  //module 配置如何处理模块
  module: {
    //配置模块的读取和解析规则，通常用来配置 Loader
    rules: [  //rules是一个数组
      // ...(config.dev.useEslint? [{
      //   test: /\.(js|vue)$/,
      //   loader: 'eslint-loader',
      //   enforce: 'pre',
      //   include: [resolve('src'), resolve('test')],
      //   options: {
      //     formatter: require('eslint-friendly-formatter'),
      //     emitWarning: !config.dev.showEslintErrorsInOverlay
      //   }
      // }] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        // 对于图片资源，当文件体积小于10kb时，将其生成为base64，直接插入html中
        // 当大于10kb时，将图片名称进行按照命名规则进行更改
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}