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。
下面创建一个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 内置了一个开发服务器，这会在你更改文件时自动重建你的应用程序，并支持 模块热替换 ，以便你快速开发。你只需指定 入口文件 即可:
然后cmd运行该文件
parcel index.html
parcel支持热更新,上面的命令功能也有热更新
打包后该文件的目录,会多新建出来两个文件,.cache和dist,这两个文件,前者是打包耗时时间,后者是打包完优化的文件。
然后运行浏览器,端口为http://localhost:1234/默认地址,您也可以使用 -p number 选项覆盖默认端口。
parcel index.html -p 8080
更改端口为8080
下面创建一个index.css文件引入,css文件引入不像webpack一样需要配置各种loader,parcel零配置快速优化打包。
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 文件中导入 SCSS 文件。
import './index.scss'
引入进来的链接地址,都是dist目录下优化完的。
index.html文件
上面的link链接地址,和script标签src链接地址,都是优化完的。
希望这篇文章能让你有所收获
如有问题,望大牛指点。
对本文章感兴趣的小伙们可以关注我的微信公众号，公众号也会发布一些技术文章哦。
秦司令
网友评论