关于webpack, require的使用问题

Question

1)
const Product = r => require.ensure([], () => r(require('@/page/Store/Product')), 'Product')
export default item => {
  return [{
    path: 'store/product',
    component: Product,
    meta: [{ href: '', title: 'store.product' }]
  }]
}

2)
const Product = r => require.ensure([], () => r(require('@/page/Store/Product').default), 'Product')
export default item => {
  return [{
    path: 'store/product',
    component: Product,
    meta: [{ href: '', title: 'store.product' }]
  }]
}

3)
const Product = require('@/page/Store/Product')
export default item => {
  return [{
    path: 'store/product',
    component: Product,
    meta: [{ href: '', title: 'store.product' }]
  }]
}
4)
const Product = require('@/page/Store/Product').default
export default item => {
  return [{
    path: 'store/product',
    component: Product,
    meta: [{ href: '', title: 'store.product' }]
  }]
}

上面四种写法其中第三种回报下面的错误, 第一二四都正常运行,
有人知道原理是什么吗, 像第一种第二种一个添加default或者一个不添加default都不会报错,
实在webpack有什么配置么?

Answer 1

你这么写的话

export default {
  a: 1
}

会被编译做

exports.default = {
  a: 1
}

所以使用require引入的时候需要加default。
之前对外打包工具库的时候遇到过这个问题，然后我觉得一应该也会报错啊。

你可以去这看一下
根据你导出的时候用的是esModule还是别的会加一个__esModule的标记，然后用import引入的时候根据这个给你返回default还是整体，使用require就不会做判断。