webpack打包软件-一步一步教你如何使用webpack打包后端组件（一）

bendan520 webpack

2023-09-03 0 4,975 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

这是我参加文章挑战的第7天。详情请查看：文章挑战

前言

随着后端的不断发展，复杂度也与日俱增，基于组件的开发应运而生。在日常开发中，我们也会封装一些常用的代码块和组件。组件应该自己处理它们应该做的事情。事物，抽取出来的组件可以独立完成逻辑处理，通过传入/暴露的方式与其他组件进行交互，这样也就产生了插件。

webpack打包软件-一步一步教你如何使用webpack打包后端组件（一）

如何开发一个组件

首先需要搭建开发环境，用于编写的插件的开发、调试和打包。现在后端打包工具有很多，比如webpack gulp rollup...网上也有很多关于这个打包工具的分析。如果您有兴趣，可以了解更多查看相关信息。当你有了开发环境之后，我已经给你准备好了插件，使用的是TS手写拖拽球。有兴趣的朋友可以看一下手写TS组件的这篇文章《拖放式可吸附浮球组件》。

今天我们需要用到的主角是webpack。在上一篇文章中，我们讨论了如何从头开始配置 webpack 模板。我们明天就可以使用它！不过，使用它来开发插件的某些部分仍然需要更改。我将带你一步步改变这一点。

拉动模板

我们需要该组件来拉取开发模板。

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

修改模板更改模板目录结构

在src中新建一个components文件夹，作为所有插件的存放目录，在该文件夹下新建一个better-draggable-ball文件夹，作为我们要打包的第一个插件开发目录webpack打包软件，并新建一个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 插件
  },
// ...

对于导出的位置webpack打包软件，我们还为其定义了一个组件，作为插件的导入路径（打包后）。

// ...
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,
  },
// ...