您的位置：首页 > Web前端

前端进阶（10） - webpack 之外的另一种选择：parcel

2018-09-15 00:00 375 查看

webpack 之外的另一种选择：parcel

之前有写过一篇 webpack 之外的另一种选择：rollup，这次算是姊妹篇，介绍另外一个工具 parcel.

现在前端打包基本上都会用 webpack，但经常使用 webpack 的开发者基本都有一个体会：配置比较复杂，尤其是有很多项目的时候，更新需要到处改配置。

parcel 便提供了一个额外的选择，对于不喜欢配置的开发者尤其友好，因为 parcel 没有配置文件，仅有的少量配置项也是从命令行输入。另外 parcel 会自动识别安装在 package.json 中的 parcel 插件，然后导入，而无需手动配置。

1. parcel

1.1 安装

# 全局
npm install -g parcel-bundler

# 本地
npm install --save-dev parcel-bundler

1.2 开发

parcel 可以使用任何类型的文件作为入口，但一般是以 HTML 或 JavaScript 文件作为入口文件。

当以一个 html 文件作为入口进行开发时，在 html 文件中，你可以声明多个 js 入口文件，也可以声明多个 css 入口文件，也可以加载其他的静态资源（如图片）。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./index.css">   <!-- css 入口文件 -->
<link rel="stylesheet" href="./index2.css">  <!-- css 入口文件 2 -->
</head>
<body>
<img src="./images/background.jpg">            <!-- 加载图片 -->
<script src="./index.js"></script>             <!-- js 入口文件 -->
<script src="./index2.js"></script>            <!-- js 入口文件 2 -->
</body>
</html>

但一般都会只有一个 js 入口，css 使用 js 来加载。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="./index.js"></script>             <!-- js 入口文件 -->
</body>
</html>

运行开发命令

parcel path/to/target.html

打包

parcel build path/to/target.html

以一个 js 文件作为入口进行开发也是类似的，可以参考官方文档 https://parceljs.org/。

2. parcel vs webpack

与 webpack 相比，零配置是 parcel 最大的特点与优势，但 parcel 没有 webpack 功能强大，也缺少了些灵活性。

3. 后续

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端前端构建 webpack javascript parcel

相关文章推荐

新的分享

章节导航