1

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

场景

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

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

需求

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

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

clipboard.png
clipboard.png

目前的配置

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
rxliuli 268
2018-12-26 提问
3 个回答
0

已采纳

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

0

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

0

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

撰写答案

推广链接