webpack 導出、導入模塊（及路徑）

參考：http://www.javashuo.com/article/p-nzmpveqo-eq.html (下面的代碼親測有效)

注：導入的模塊的方法，只有兩種方法  import 和 require() 。能夠使用 import 導入的基本均可以使用require導入。export default方法導出的，只能使用import導入。webpack2.0之後基本都使用import的寫法

　　es6 動態登入模塊的方法是 import() ，參考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import

方案1：  export （這種方案能夠把要導出的一塊兒導出，也一個一個導出）

導出模塊：

let run = function () {
  console.log('run')
}
let say = function(){
  console.log('say')
}
export {run, say} // 最後一塊兒導出

或 （除了這種導出方式，其餘的導出方式，文件有多個接口要暴露，都是導出一個對象）

export let run = function () {  // 一項一項的導出
  console.log('run')
}

export let say = function(){
  console.log('say')
}

導入模塊：

import { run, say } from '../../api/test.js'

方案2：  export default （這種導出方案，導入時，只能使用一個變量去接收）

導出模塊：

let run = function () {
  console.log('run')
}
let say = function(){
  console.log('say')
}
export default {run, say}

導入模塊：

import test from '../../api/test.js'  //  導入時，只能使用一個變量去接收,如這裏的 test

 方案3：  module.exports

導出模塊：

let run = function () {
  console.log('run')
}
let say = function(){
  console.log('say')
}
module.exports = {run, say}

導入模塊：

import { run, say } from '../../api/test.js'

 

---

導入模塊的路徑：通常導入js文件的路徑只有下面三種路徑，基本不會使用   絕對路徑  和  根目錄路徑。

一、相對路徑 （這個是可行的）

二、npm 包 路徑 

三、webpack打包配置的路徑別名  http://www.cnblogs.com/ye-hcj/p/7082620.html  或  http://www.javashuo.com/article/p-vpxufrwk-hc.html（注意，配置文件的修改，程序必需要重啓npm run dev 纔有效）

　  vue-cli中路徑別名使用：使用別名的路徑，別名必須在前面，否則無效報錯；在src目錄的別名，內置是用@來表示的。

注意：一、路徑在後面的一節不必定是文件名，也多是文件夾的名稱。如：import router from './router'，這個路徑 指向的是 rooter下面的  index.js文件。

 　　　二、webpack2.0後 import 和 module.exports就不能 搭配使用了，因此最好不要使用 module.exports 導出模塊。    https://www.jianshu.com/p/e774aa9fb1a1

　　　　vue 導出對象，統一使用export（包括export default）。