使用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/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="使用Fusebox作为webpack的捆绑替代品">
  </div>

以上是使用Fusebox作为webpack的捆绑替代品的详细内容。更多信息请关注PHP中文网其他相关文章！