webpack 如何打包浏览器直接可用的 js？

Question

webpack 如何打包浏览器直接可用的 js？

场景

吾辈有一些在写 user.js 时会用到的脚本，但全部放到一个文件中显得太过庞大，所以打算将方法分离开来。每个方法都放到单独的文件中，便于单元测试。
但在打包的时候遇到了一些问题

• 打包出来的 js 很大，含有很多其他的内容
• 打包出来的内容无法放到浏览器直接运行
• 打包时一直显示 fs 没有找到

需求

例如下面的是 src 文件夹，吾辈需要将 module 下面的 js 全部读取出来，并以 方法名 -> 方法 的形式集中到一个对象上，最后，导出这个对象。吾辈应该怎么配置 webpack 呢？

附：如果可能，可否在每次修改 js 时自动导出/更新 bundle.js 文件？

目前的配置

webpack.config.js

const path = require('path')

module.exports = {
  mode: 'development',
  entry: ['babel-polyfill', './src/index.js'],
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js',
    libraryTarget: 'umd'
  },
  devtool: 'source-map'
}

index.js

import path from 'path'
import fs from 'fs'
import flatMap from './module/array/flatMap'
import toObject from './module/array/toObject'

/**
 * 递归读取文件夹及其子文件夹
 * @param {String} realpath 读取的根路径
 */
function recursiveReadFile(realpath) {
  return flatMap(fs.readdirSync(realpath), f => {
    var template = path.resolve(__dirname, realpath, f)
    // 如果是文件就直接返回
    var stats = fs.statSync(template)
    if (!stats.isDirectory()) {
      return {
        name: f,
        path: template
      }
    }
    // 如果是文件夹就递归调用
    return recursiveReadFile(template)
  })
}

var fns = recursiveReadFile(path.resolve(__dirname, './module'))
var res = toObject(
  fns,
  o => o.name.substr(0, o.name.length - 3),
  o => require(o.path)
)

export default res

Answer 1

吾辈发现 rollupjs 更适合打包 js sdk，具体可参考
https://blog.rxliuli.com/p/c3...

Answer 2

把index.js中找文件的逻辑移到webpack.config.js中，最后得出的列表放在entry里面

Answer 3

我不知道你想做什么
你用了fs肯定浏览器里会有问题的