手把手教你使用webpack打包前端组件（一）

这是我参与更文挑战的第7天，活动详情查看：更文挑战

前言

随着前端不断的发展，复杂程度也是日益提升，组件化开发应运而生，在日常开发中，我们也会将一些常用的代码块，组件进行一个封装处理，组件应该自己处理自己应该做的事情，那这些被抽离出来的组件可以独立完成逻辑处理，通过传入/暴露的方式来与其他组件进行交互，这也就形成了插件。

如何开发一个组件

首先你需要搭建一个开发环境，用于开发调试以及打包写好的插件，现在前端的打包工具有很多，例如有webpack gulp rollup ... 网上也有很多关于这些打包工具的分析大家有兴趣可以多查查相关资料。有了开发环境之后，插件我也给大家准备好了，用的是TS手写的拖拽球，有兴趣的小伙伴可以看看这篇文章手写TS组件之《可拖拽吸附的悬浮球组件》。

今天我们需要用到的主角是webpack,在前一篇文章我们讲了如何从零去配置一个webpack模板，我们今天正好可以用上它了！但是这个是使用它来开发插件的有些地方还是需要修改的，这个我会带着大家一步一步的进行修改。

拉取模板

我们需要组件拉取一个开发模板。

git clone https://github.com/QC2168/webpack-template.git

修改模板

修改模板目录结构

在src中新建components文件夹作为全部插件存放的目录，在其文件夹下面新建better-draggable-ball文件夹，作为我们要打包的第一个插件开发目录，新建index.ts入口文件。

src                          
├─ components                
│  └─ better-draggable-ball  
│     └─ index.ts            
├─ pages                     
│  ├─ hello                  
│  │  ├─ hello.html          
│  │  ├─ hello.scss          
│  │  └─ hello.ts            
│  └─ index                  
│     ├─ index.html          
│     ├─ index.scss          
│     └─ index.ts            
└─ main.ts

修改配置文件

在入口文件加入src / components / better-draggable-ball / index.ts，

// ...
 entry: {
    main: './src/main.ts',
    index: './src/pages/index/index.ts', // index页面
    hello: './src/pages/hello/hello.ts', // hello页面
    'better-draggable-ball': './src/components/better-draggable-ball/index.ts', // better-draggable-ball 插件
  },
// ...

出口的位置，我们也给他定义一个components，作为插件的导出路径（打包之后）。

// ...
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: (pathData:any) => (pathData.chunk.name === 'better-draggable-ball' ? 'js/components/[name]/[name].js' : 'js/[name]/[name].js'),
    clean: true,
  },
// ...

到这之后，我们已经对模板进行一个简单的目录和配置文件的改造。下一篇文章我们将带领大家把组件植入到我们的模板中，咱们下期见！

😀😀 关注我，不迷路！ 😀😀