手把手教你使用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,
  },
// ...
复制代码

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

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