Webpack is the front-end packaging tool most people use at present, but Webpack has powerful functions, which leads to complex configuration (various corresponding conversion loaders, plug-ins, etc.). Improper configuration may also lead to slow packaging speed.

Recently, a new packaging tool called Parcel has emerged that is getting as much attention as Webpack. Here’s how to use Parcel in detail.

Quick learning

Check the official website directly for installation.

1. File reference

index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="wrap">
        <h1 id="title"></h1>
        <p id="body"></p>
    </div>
    <script src="./index.js"></script>
</body>
</html>
Copy the code

This introduces the js entry file via the script tag.

index.js

const posts = require('./posts');

posts.fetchOnePost()
    .then(post= > {
        document.getElementById('title').innerHTML = post.title;
        document.getElementById('body').innerHTML = post.body;
    })
Copy the code

Here, import the posts.js file in the current directory by requiring ().

posts.js

module.exports = {
    fetchOnePost: function () {
        return new Promise((resolve, reject) = > {
            fetch('http://jsonplaceholder.typicode.com/posts/1')
                .then(res= > res.json())
                .then(data= >{ resolve(data); }}})})Copy the code

Json data is requested via the fetch() method, which is called in index.js to display the data.

The $parcel index.html command line generates the corresponding dist file and automatically starts a Server. You can see the results at http://localhost:1234.

Dist file generates a JS file with the same name as your project. This js file is the packaged JS file.

2. Built-in converter

Parcel has a lot of common converters built in compared to Webpack and doesn’t require us to install and configure them ourselves (style-loader, CSS-loader, etc.). And it has Babel built in, so it doesn’t require us to install Babel stuff.

For example, import the file to ES2015:

index.js

import { posts } from './posts';
Copy the code

posts.js

export const posts = {
    ...
}
Copy the code

Refresh http://localhost:1234 at this point and it will still display normally.

3. The CSS file

One of the most commonly used plug-ins for CSS is PostCSS, which doesn’t need to be installed like Webpack, but Parcel already comes built-in. If we need to use PostCSS autoprefixer, we just need to install the Autoprefixer plug-in and configure the. Postcssrc file.

Parcel automatically runs and transforms when it finds a configuration file (e.g..babelrc,.postcssrc) in the module.

Autoperfixer: $NPM install Autoprefixer

.postcssrc

{
    "plugins": {
        "autoprefixer" : true}}Copy the code

style.css

h1 {
    color: gray;
    border: 1px solid red;
    border-radius: 5px;
    display: flex;
}
Copy the code

After packaging CSS file: dist/b032741df18dc4b3aeb571ee677c350f CSS

h1 {
    color: gray;
    border: 1px solid red;
    border-radius: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
Copy the code

You can see that the browser prefix is automatically added. In addition to a more js file with the same 7963 b20fc948f008b0e9fbc9750edbe8. Js. That should be the parcel that converts the CSS file into an importable file.

If you’re using SCSS, just use a CSS file with the suffix. SCSS, and the Parcel will recognize and convert it automatically.

4. Third-party modules

$NPM install jquery; $NPM install jquery;

index.js

import { posts } from './posts';
import $ from 'jquery';

posts.fetchOnePost()
    .then(post= >{$('#title').html(post.title);
        $('#body').html(post.body);
    })
Copy the code

5. The plug-in

As noted in the official documentation, the plug-in is named pancl-plugin-vue and can be used to support the Vue framework for a parcel. See the NPM for package-plugin-vue for details.

In general, Parcel is much simpler and more convenient than Webpack, especially since it saves a lot of work by eliminating the need to configure various converters and plug-ins. Currently, However, Parcel is not as good as Webpack in terms of features, such as reverse proxy Settings, and plug-ins will be developed as more and more people use Parcel.