写在前面

最近在公司负责开发一套公司业务相关的通用工具库，第一次接触到这种需求，还是很兴奋的，吭哧吭哧开发了一段时间，现在准备开始应用到实际项目中了，于是开始进行 1.0.0.2022.3.23_beta 测试发布工作，虽然之前对 webpack 有所了解，但是并不深入，更多停留在 vue 项目相关的打包上，这次的打包工作有所不同，打包的是纯 js 工具库，于是我开始踩坑，也就有了今天这一篇踩坑实录，接下来就跟我一起看看我的爬坑记吧

项目简介

为了避免对公司相关业务代码的泄露，这里我就采用示例代码表达一下原项目结构

// ==================== tool.js 中的代码 ====================
const toolFun = function(){
  console.log('I am a Tool Person!!')
}
export default toolFun;

// ==================== init.js 中的代码 ====================
import core from './core'
import Tool from './tool'
const init = function(){
  core.prototype.Tool = Tool
}
export default init;

// ==================== core.js 中的代码 ====================
import init from './init'
const createInstance = function(params){
  init(params)
}
export default createInstance;

// ==================== vue 中引用的代码 ====================
<template></template>
<script>
import CreateInstance from '@/core/core'
export default {
  mounted(){
    const Instance = new CreateInstance()
    console.log('Instance', Instance)
    window.Instance = Instance
  }
}
</script>
<style></style>

这个项目由一系列 js 工具函数组成，内部经过一系列相互调用后最终在入口文件 core.js 中通过调用 init 方法挂载到实例上，写法可能还有些不太严谨，欢迎大佬指正

踩坑过程

对 js 工具库进行单独打包

因为平时开发的技术栈是 vue ，所以这个项目也以 vue 为测试环境，在 vue 中进行开发，开发过程中完全没有问题，而开始打包的时候，问题就出现了，下面是一开始打包的 webpack 配置:

const path = require('path')
module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, 'src/core/core.js'),
  output: {
    path: path.resolve(__dirname, 'core'),
    filename: 'core.min.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

打包顺利完成

引入 Vue 中进行测试

接下来就到了引入测试阶段了，果然，并没有想象中那么顺利，报错如期而至

问题分析

遇到问题先百度

由于先前没有这方面经验，所以先 百度一下，你就知道了！ ，可惜，百度了好多下，我还是不知道。。。

分析报错

于是开始基于报错盲猜，可能是打包配置的问题，而 default 让我几乎猜到就是 export default 导出的问题，于是开始扒拉 webpack官网，找到 DOCUMENTATION-Configuration 中的 OutPut 相关配置

填坑

修改 webpack 配置，再次打包、测试

const path = require('path')
module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, 'src/core/core.js'),
  output: {
    path: path.resolve(__dirname, 'core'),
    filename: 'core.min.js',
    libraryTarget: 'umd' // 添加输出库配置
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

测试正常，至此踩坑结束！

扩展 Webpack & Rollup

虽然踩了一个很小很初级的坑，但是还是在这个过程中学到了不少，解决完打包问题后，顺便了解了下相关的打包工具，其中两大框架 React、Vue 打包所使用的 Rollup 号称打包单一工具类库更简洁、体积更小，于是不多说，顺手做个 Webpack、Rollup 对比

打包文件对比

不难看出，webpack 打包产生的文件要比 rollup 的杂乱非常多，其实这是因为 webpack 自己实现了一套 __webpack_exports__ __webpack_require__ module 机制，然后把每个js文件包裹在一个函数里，实现模块间的引用和导出，因此使得打包后的代码显得不堪入目，而 rollup 的简洁程度就比 webpack 高了不止一个 level了，难怪 React、Vue 两大框架都选用它作为御用打包工具。

应用场景

正如官网介绍所说的： Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。 Webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。 Rollup就是一个用来打包类库的最佳打包工具，而 Webpack 更加偏向于前端工程化，更加适合涉及 css、html 等复杂的代码拆分合并的场景。

总结

Webpack 的配置还是相对比较固定的，常用的配置项无非就是那么几项，只要能够多花时间，熟悉各种场景所对应的特定配置，基本上就能够少踩很多的坑！

往期好文推荐

写在最后

博主接下来将持续更新好文，欢迎关注博主哟！！ 如果文章对您有帮助麻烦亲点赞、收藏 + 关注和博主一起成长哟！！❤️❤️❤️