手把手教你使用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,
  },
// ...
複製代碼

到這以後，咱們已經對模板進行一個簡單的目錄和配置文件的改造。下一篇文章咱們將帶領你們把組件植入到咱們的模板中，我們下期見！

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