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