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

• 專案名稱和專案版本，他們都是必須的，如果沒有就無法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]"},