使用Fusebox作為webpack的捆綁替代品

尋求WebPack替代方案？考慮保險箱。它提供了可比的功能 - 編碼拆分，熱模塊重新加載，動態導入 - 但具有很大的優勢：默認情況下，代碼拆分為零 - 配置（僅在版本4.0中獲得的功能WebPack）。

保險箱優先考慮簡單性（通過簡化的配置）和性能（通過積極的緩存）。它通過插件的可擴展性允許處理超出其默認值的高級需求。對於打字稿用戶，它是一流的公民，意思是打字稿項目不需要額外的配置。 JavaScript項目同樣得到充分支持。

讓我們構建一個基本的React應用程序以證明其易用性。完整的代碼可在GitHub上找到。

保險箱不是唯一的WebPack替代方案；馬克斯·阿肯科科（Maks Akymenko）在包裹上的出色文章強調了另一個強大的競爭者。

基本設置

1. 創建一個新的項目目錄並使用NPM初始化：

 mkdir csstricks-fusebox-react && cd $ _
npm init -y

2. 安裝React和React Dom：

 npm安裝 - 保存react react-dom

3. 安裝Fusebox，TypeScript，uglifyjs和Node Sass：

 NPM安裝-Save-dev fuse-box typeScript uglify-js節點sass

4. 創建一個src文件夾並添加app.js和index.js ：

 // app.js
導入 *作為“反應”的反應；
從“ ./logo.svg”中導入 *為徽標;

const app =（）=>（
  <div classname="App">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="使用Fusebox作為webpack的捆綁替代品">
  </div>

以上是使用Fusebox作為webpack的捆綁替代品的詳細內容。更多資訊請關注PHP中文網其他相關文章！