作者:小可爱小潴 | 来源:互联网 | 2023-09-13 16:39
Parcel能够应用任何类型的文件作为入口,与webpack不同的是Parcel倡议应用HTML文件为入口文件。如果在HTML中应用相对路径引入次要的JavaScript文件,Parcel也将会对它进行解决将其替换为绝对于输入文件的URL地址。
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("Hello Parcel
");
非 js 类型文件
import $ from "jquery";
import "./style.css";
import logo from "./zce.png";
$(document.body).append(``);
反对动静导入
import("jquery").then(($) => {
$(document.body).append("Hello Parcel
");
$(document.body).append(``);
});
生产模式打包
这将敞开监听模式和热模块替换,所以它只会编译一次。它还会开启 minifier 来缩小输入包文件的大小。Parcel 应用的 minifiers 有 Javascript 的 terser ,CSS 的 cssnano 还有 HTML 的 htmlnano。Parcel 还将会给大多数 bundles 文件名增加 hash,以获得最佳性能和效率
yarn parcel build src/index.html