Parcel零配置,快速打包工具

---

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文件

    
    


    
我是标题1

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文件。

    
    
    


    
我是标题1

在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链接地址,都是优化完的。

---

希望这篇文章能让你有所收获

如有问题,望大牛指点。

对本文章感兴趣的小伙们可以关注我的微信公众号，公众号也会发布一些技术文章哦。

秦司令