package.json/webpackconfig.js 配置属性详解

webpackconfig.js

let path = require('path');

// vue 新版本必要的插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');

// 这个配置文件，起始就是一个js文件，通过 Node 中的模块操作，向外暴露了一个配置对象
module.exports = {
	
    mode: 'none',
    
    // 入口，表示，要使用 webpack 打包哪个文件
    entry: path.join(__dirname, 'src/main.js'),
    
    output: {
        // 输出文件相关的配置

		// 指定打包好的文件，输出到哪个项目中
        path: path.join(__dirname, 'dist'),
        // 这是指定输出文件的名称
        filename: 'bundle.js'
    },
    
    plugins: [
    	// 存放一些必要的插件
        new VueLoaderPlugin()
    ],
    
    module: {
        // 这个节点用于配置所有第三方模块加载器
        rules: [
            // 所有第三方匹配规则

            // 例如配置处理 .vue 文件的第三方 loader 规则
            {test: /\.vue$/, use: 'vue-loader'}
        ]
    },
    
    resolve: {
        alias: {
            // 设置 vue 被导入时候的包的路径
            "vue$": "vue/dist/vue.js"
        }
    }
};

package.json

快速新建 package.json 文件

package.json 内容解释：

• 项目名称和项目版本，他们都是必须的，如果没有就无法install

  "name": "webpack-vue",
  "version": "1.0.0",

• main属性指定了程序的主入口文件。意思是，如果你的模块被命名为foo， 用户安装了这个模块并通过require(“foo”)来使用这个模块，那么require返回的内容 就是main属性指定的文件中 module.exports指向的对象。
• 它应该指向模块根目录下的一个文件。对大对数模块而言，这个属性更多的是 让模块有一个主入口文件，然而很多模块并不写这个属性。

  "main": "main.js",

• 指定了运行脚本命令的npm命令行缩写，比如start指定了运行npm run start时，所要执行的命令。
• 下面的设置指定了npm run dev、npm run bulid、npm run unit、npm run test、npm run lint时，所要执行的命令。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --baseContent src --hot"
  },

• 一个字符串数组，方便别人搜索到本模块

  "keywords": [],

• "author"是一个码农， "contributors"是一个码农数组。 "person"是一个有一些描述属性的对象

  "author": "manong",
  
  "contributors": [ "manong1","manong2" ],
  
  "person": {
  "name":"manong",
  "email":"[email protected]",
  "url":"http://---"
}

• 你应该为你的模块制定一个协议，让用户知道他们有何权限来使用你的模块， 以及使用该模块有哪些限制。最简单的，例如你用BSD-3-Clause 或 MIT之类的协议；
• 可以查阅：协议列表

  "license": "ISC",

• npm install name -save 简写（npm install name -S） 自动把模块和版本号添加到dependencies。

• npm install name -save-dev 简写（npm install name -D） 自动把模块和版本号添加到devdependencies。

• -D后，安装包会在package中的 devDependencies对象中。简称dev。dev是在开发环境中要用到的。

• -S后，安装包会在package中的 dependencies 对象中。简称dep。dep是在生产环境中要用到的。

• 举个例子：
  构建工具：gulp和webpack是用来压缩代码，打包等需要的工具，程序实际运行的时候并不需要，就要放在dev中所以要用 -D
  项目插件：例如element ui、echarts这种插件要在运行中使用的，就要放在dep中所以就用 -S

一般我们项目插件，在api中都可以看到，一般都是-S。因为这些插件是在程序运行中使用的。

  "dependencies": {
    "vue":"^2.5.17",
    "vue-template-compiler":"^2.5.17",
    "vue-loader":"^15.4.2",
    "webpack": "^4.21.0"
  },
  "devDependencies": {
    "coffee-script": "^1.12.7"
  },

• 安装文件版本说明
  1. 指定版本：比如1.2.2，遵循“大版本.次要版本.小版本”的格式规定，安装时只安装指定版本。
  2. 波浪号 + 指定版本：比如~1.2.2，表示安装1.2.x的最新版本（不低于1.2.2），但是不安装1.3.x，也就是说安装时不改变大版本号和次要版本号。
  3. 插入号 + 指定版本：比如ˆ1.2.2，表示安装1.x.x的最新版本（不低于1.2.2），但是不安装2.x.x，也就是说安装时不改变大版本号。需要注意的是，
  4. latest：安装最新版本。

注意：如果版本号为0， 则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。

"dependencies": {
		"example0": "1.2.2",
		"example1": "~1.2.2",
		"example2": "ˆ1.2.2",
		"example3": "latest",
	}

• 一个描述，方便别人了解你的模块作用，搜索的时候也有用。

  "description": ""

• 项目问题反馈的Url或email配置

"bugs":{"url":"http://--","email":"[email protected]"},

package-lock.json

1. 这个文件会保存 node_modules 中所有包的信息（版本、下载地址等），下次 npm 下载速度就可以提升
2. 锁定安装包的版本，如果项目依赖 1.1.1 版本，重新 install 会下载最新版本，而不是 1.1.1 ，这个文件就可以锁定版本号，防止自动升级更新