To start with my shallow understanding of packaging, the main purpose is to reduce network requests in the front end, reduce CSS cross-references, reduce JS cross-references, reduce HTML cross-references, and keep files as small as possible. Second, it also makes it easier for us to develop without having to write the same ,

Webpack, uh, forget it, it’s fucking annoying.

Parcel, a human-friendly packing tool

However, at present (March 11, 2018) it is not very convenient to build a VUE project, we can still use it to learn less,sass,typescript and other technologies, and there are not so many configurations.

How convenient can it be? Take less for example.

1 Install parcel: Yarn: Yarn global add parcel-bundler NPM: NPM install -g parcel-bundler 2 NPM install -g parcel-bundler 2 yarn init -y or NPM init -y

File name: main.html

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/1.less">
</head>
<body>
    <div id="test1"</div> </body> </ HTML >Copy the code

File name: 1. Less

@nice-blue: #5B83AD;
@light-blue: @nice-blue + # 111;
#test1 {
  color: @light-blue;
}
Copy the code

Then simply type the command: parcel main.html to… The end ！！！！ During this time I did not install any dependency, fully automatic. The highlight is that the goods also bring their own HTTP server, it will help you get your project to http://localhost:1234, and you save the file, it will automatically help you update the content in http://localhost:1234, deliciously.

other

Js, support require/ES6. Support Babel, PostCSS,PostHTML. More details -> pseudo Chinese official website