关于parcel:打包工具Parcel

Parcel 是 Web 利用打包工具，利用多核解决提供了极快的速度，并且不须要任何配置。

Parcel 能够应用任何类型的文件作为入口，与 webpack 不同的是 Parcel 倡议应用 HTML 文件为入口文件。如果在 HTML 中应用相对路径引入次要的 JavaScript 文件，Parcel 也将会对它进行解决将其替换为绝对于输入文件的 URL 地址。

装置

yarn add parcel-bundler --dev

以后模块，或者以后模块所依赖模块更新后，回调会主动执行

import foo from "./foo";

foo.bar();

if (module.hot) {module.hot.accept(() => {console.log("hmr");
  });
}

Parcel 内置了一个当你扭转文件时可能主动从新构建利用的开发服务器，而且为了实现疾速开发，该开发服务器反对热模块替换。只须要在入口文件指出：

yarn parcel src/index.html

当初在浏览器中关上 http://localhost:1234/

主动装置依赖

import $ from "jquery";

$(document.body).append("<h1>Hello Parcel</h1>");

非 js 类型文件

import $ from "jquery";
import "./style.css";
import logo from "./zce.png";

$(document.body).append(`<img src="${logo}" />`);

反对动静导入

import("jquery").then(($) => {$(document.body).append("<h1>Hello Parcel</h1>");

  $(document.body).append(`<img src="${logo}" />`);
});

生产模式打包

这将敞开监听模式和热模块替换，所以它只会编译一次。它还会开启 minifier 来缩小输入包文件的大小。Parcel 应用的 minifiers 有 JavaScript 的 terser，CSS 的 cssnano 还有 HTML 的 htmlnano。Parcel 还将会给大多数 bundles 文件名增加 hash，以获得最佳性能和效率

yarn parcel build src/index.html