parcel它跟webpack一樣都是打包工具,但是它比webpack好用,parcel主要是針對小型項目打包,parcel可以打包任意類型的文件,它利用多核處理提供極快的性能狡刘。
安裝
npm install -g parcel-bundler
配置項package.json文件
npm init -y
-y的意思是全部為yes
parcel可以將任意類型文件作為入口點(entry) , 但是HTML或javascript文件是一個很好的開始,如果你使用相對路徑將你的主javascript文件鏈接到HTML中,parcel也會為你處理,并將該引用替換為輸出文件的URL绞惦。
下面創(chuàng)建一個index.html和inex.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>我是標題1</h1>
</body>
<script src="index.js"></script>
</html>
Parcel 內(nèi)置了一個開發(fā)服務(wù)器，這會在你更改文件時自動重建你的應(yīng)用程序借帘，并支持 模塊熱替換 锻煌，以便你快速開發(fā)。你只需指定 入口文件 即可:
然后cmd運行該文件
parcel index.html
parcel支持熱更新,上面的命令功能也有熱更新
打包后該文件的目錄,會多新建出來兩個文件,.cache和dist,這兩個文件,前者是打包耗時時間,后者是打包完優(yōu)化的文件姻蚓。
然后運行瀏覽器,端口為http://localhost:1234/默認地址,您也可以使用 -p number 選項覆蓋默認端口宋梧。
parcel index.html -p 8080
更改端口為8080
下面創(chuàng)建一個index.css文件引入,css文件引入不像webpack一樣需要配置各種loader,parcel零配置快速優(yōu)化打包。
h1{
color:red;
}
看index.html文件中引入css文件狰挡。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@import 'index.css'
</style>
</head>
<body>
<h1>我是標題1</h1>
</body>
<script src="index.js"></script>
</html>
在js文件里也能引入css文件,下面是CommonJs的引入捂龄。
alert(1)
require('./index.css')
Es6寫法也可以引入释涛。
alert(1)
import './index.css'
除了純 CSS ，還支持其他編譯成 CSS 語言倦沧，如 LESS 唇撬，SASS 和 Stylus ，并以相同的方式工作展融。
SCSS編譯需要 node-sass 模塊窖认。可以用 npm 來安裝它：
npm install node-sass
一旦 node-sass 安裝完成告希，你就可以在 JavaScript 文件中導(dǎo)入 SCSS 文件扑浸。
import './index.scss'
引入進來的鏈接地址,都是dist目錄下優(yōu)化完的。
上面的link鏈接地址,和script標簽src鏈接地址,都是優(yōu)化完的燕偶。
希望這篇文章能讓你有所收獲
如有問題,望大牛指點喝噪。
對本文章感興趣的小伙們可以關(guān)注我的微信公眾號，公眾號也會發(fā)布一些技術(shù)文章哦指么。
