webpack打包前端组件(一)
前言
随着前端不断的发展,复杂程度也是日益提升,组件化开发应运而生,在日常开发中,我们也会将一些常用的代码块,组件进行一个封装处理,组件应该自己处理自己应该做的事情,那这些被抽离出来的组件可以独立完成逻辑处理,通过传入/暴露的方式来与其他组件进行交互,这也就形成了插件。
如何开发一个组件
首先你需要搭建一个开发环境,用于开发调试以及打包写好的插件,现在前端的打包工具有很多,例如有webpack
gulp
rollup
...
网上也有很多关于这些打包工具的分析大家有兴趣可以多查查相关资料。
今天我们需要用到的主角是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,
},
// ...
到这之后,我们已经对模板进行一个简单的目录和配置文件的改造。下一篇文章我们将带领大家把组件植入到我们的模板中,咱们下期见!
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanekkg
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01