我们知道 ,vue-cli 帮助我们初始化了 webpack 使得我们配置导入文件非常轻松 ,那么 ,它导入文件到底是怎样的呢 ? ,require 和 import 导入文件有什么区别呢 ,我们在这里具体来研究一下这个问题

首先 ,我们创建 a.js 和 b.js ,b.js导出模块 ,a.js导入模块 ,再让 main.js 入口模块 import a.js, 使其执行

import 导入 export 和 export default

这个没什么好说的 ECMAScript标准,看看结果就行

b.js

export function hehe() {
  console.log('hello')
}

export function haha() {
  console.log('world')
}

export default {
  hehe1() {
    console.log('hello1')
  },
  haha1() {
    console.log('world1')
  }
}

a.js

import {haha,hehe} from './b'
import b from './b';
hehe();
haha();
b.hehe1();
b.haha1();
console.log(b);

观测结果

require 导入 module.exports

没啥好说的 ,CommonJs标准

b.js

module.exports = {
  hehe() {
    console.log('hello')
  },
  haha() {
    console.log('world')
  }
}

a.js

let b = require('./b');
b.hehe();
b.haha();
console.log(b);

观测结果

import 导入 module.exports

b.js

module.exports = {
  hehe() {
    console.log('hello')
  },
  haha() {
    console.log('world')
  }
}

a.js

import b from './b';

b.haha();
b.hehe();
console.log(b);

观测结果

可见 module.exports 导出模块是直接导出了一个对象

require 导入 export 和 export default

require导入 export

b.js

export function hehe() {
  console.log('hello')
}

export function haha() {
  console.log('world')
}

a.js

let b = require('./b');
b.hehe();
b.haha();
console.log(b);

观测结果

可见导出的模型是一个 module 模型, 和普通 import 导入没什么区别

require 导入export default

当我们用 require 导入 export default 时 我们就要注意了

b.js

export default {
  hehe() {
    console.log('hello')
  },
  haha() {
    console.log('world')
  }
}

a.js

let b = require('./b');
// 在 default 对象中
b.default.hehe();
b.default.haha();
console.log(b);

观测结果

可见 ,如果是 export default ,那么会给在对象里新建一个default 的键 ,对应着导出的内容 ,所以获取 export default的值

我们喜欢

let b = require('./b').default;

导入 css

我们可以使用 import 或者 require 的方式导入css ,注意 ,这种导入方式 css 将会是全局样式

let b = require('./assets/css/init.css');
import init from './assets/css/init.css';
console.log(b); // {} 都是空对象
console.log(init) // {}

导入图片

let b = require('./assets/img/logo.png');
import init from './assets/img/logo.png';
console.log(b);
console.log(init)
console.log(b === init)

观测结果

可见 ,图片导入 用什么都可以

导入json

我们新建一个JSON 文件

{
  "name": "hjy",
  "age": 17,
  "hobbies": ["篮球","排球","羽毛球"]
}

let json1 = require('./hello.json');
import json2 from './hello.json';

console.log(json1);
console.log(json2);
console.log(json2 === json1)

观测结果

可见都被转换成了对象 ,webpack 的转换功能真不错