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

參考：https://blog.csdn.net/xyphf/article/details/83411552 (下面的代碼親測有效)

注：導入的模塊的方法，只有兩種方法  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文件的路徑只有下面三種路徑，基本不會使用   絕對路徑  和  根目錄路徑。

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

2、npm 包 路徑 

3、webpack打包配置的路徑別名  http://www.cnblogs.com/ye-hcj/p/7082620.html  或  https://blog.csdn.net/m0_37828249/article/details/80781370（注意，配置文件的修改，程序必須要重啟npm run dev 才有效）

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

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

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

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