Day135 — some Parcel plugins
1 min readDec 21, 2019
This records some Parcel packages I used for my small website project. They just plug right in. Little to none configuration is needed.
Inline CSS and Javascript
This package includes external CSS right into the HTML by adding an inline tag. This is a handful when you can’t include an external CSS or javascript file without changing the file access permission.
Final code:
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>parcel-plugin-inline-source</title><style>footer,header{padding:2em;background:#16f;color:#fff}section{padding:2em;background:#fff;color:#16f}</style></head><body> <script src="https://cdn.jsdelivr.net/npm/preact/dist/preact.min.js"></script> <script>parcelRequire=function(e,t,n,r){/* 代码太长，省略…… */},{"@babel/runtime/helpers/classCallCheck":"0fcM","@babel/runtime/helpers/createClass":"P8NW","@babel/runtime/helpers/possibleConstructorReturn":"0421","@babel/runtime/helpers/getPrototypeOf":"UJE0","@babel/runtime/helpers/inherits":"d4H2",preact:"OmAK"}]},{},["Focm"]);</script> </body></html>Clear before build
Parcel does not clear the dist folder before the next build by default. I don’t know why. This package remove every file inside the dist folder before building.
Minify Images
You never want images to be too large to be loaded.
