javascript - 如何使用 webpack 配置按文件夹划分的模块 bundler ？

Question

我得到这样的文件结构

before build

我想用 webpack 使它像下面这样

after build

顺便说一句，我还想使用 ES6 import 和 export 作为模块加载器，

例如在 nav.js

class Nav extends Component {
  // react code here
}
export defalt Nav

和header.js

import Nav from `nav/bundle`
// header react code 
// .......
export defalt Header

还需要在 node_module 中捆绑 redux 和 react-route npm 包

webpack 可以做这些事情吗？有什么建议吗？

Answer 1

这是一个您可以尝试采用的粗略想法:

{
  // generate these dynamically through JavaScript
  entry: {
    footer: <path to footer js>,
    ...
  },
  output: {
    path: './demo',
    filename: '[name]/bundle.js' // name maps to entry keys
  },
  ...
}