This is the 9th day of my participation in Gwen Challenge

Program source code

Some things are really hard for Webpack to handle

With such a powerful Webpack, what’s going to catch ta? Before we answer that question, let’s take a look at some cold stuff

Assets and public

Projects have a lot of static resources, and in theory you can run projects under either file, but there are big differences.

In short

  • assets: Static resources placed here will passwebpackProcessing, will go through packaging optimization plus content hash and a series of delicious processing.
  • Public: None of the above, especially hash content, where you’re worried about versioning.

Sometimes there are things that can be said simply, but it is worth mentioning here.

Trouble speaking

First of all, we can trace back to the source and read the introduction about the public folder on create-React-app.

Officials encourage the placing of static resources in assets.

Here it is:

Note that we normally encourage you to import assets in JavaScript files instead

Then he listed three advantages:

  • The files are compressed and bundled together as much as possible. Fewer files result in fewer requests, which optimizes performance.
  • If you don’t have a file, you’re gonna be inwebpackIt’s safe to get an error at compile time.
  • Files are hashed, so you don’t have to worry about version caching. It’s so nice.

Here it is:

  • Scripts and stylesheets get minified and bundled together to avoid extra network requests.
  • Missing files cause compilation errors instead of 404 errors for your users.
  • Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.

So what happens when you use Pubclic?

First of all, the official website specifically does not recommend, and TA says that resources placed here will not be processed by Webpack.

Here it is:

If you put a file into the public folder, it will not be processed by webpack.

When using resources at the same time, you must prefix the variable “PUBLIC_URL” (the solution was posted in the electron article).

Here it is:

Only files inside the public folder will be accessible by %PUBLIC_URL% prefix.

Then the shortcomings of the ta are put on the opposite side of the advantages of assets.

Here it is:

  • None of the files in public folder get post-processed or minified.
  • Missing files will not be called at compilation time, and will cause 404 errors for your users.
  • Result filenames won’t include content hashes so you’ll need to add query arguments or rename them every time they change.

When do you need it?

The strategy on the website is:

  • When you usemanifest.webmanifestThis type of file with a specific name (dllPlugin will be involved, if you are interested)
  • You have a lot of images to use dynamically.
  • You need to introduce some scripts outside of the project
  • You need to introduce some libraries, which cannot bewebpackaccept

Here it is:

  • You need a file with a specific name in the build output, such as manifest.webmanifest.
  • You have thousands of images and need to dynamically reference their paths.
  • You want to include a small script like pace.js outside of the bundled code.
  • Some libraries may be incompatible with webpack and you have no other option but to include it as a <script> tag.

In conclusion, the problem I’m going to solve meets the fourth point above and is not accepted by webpack 😂.

What problem am I trying to solve

The problem I had to solve was simple enough to integrate a game 🎮 into my scaffolding (I’ll write a separate article about how to integrate), but what was the bottleneck?

Bottlenecks encountered

The bottleneck is that the game 🎮 project is not accepted by Webpack, so I can’t put it in assets, so I have to put it in public, then there is a problem, I will copy the package into the project whether I need it or not… This is embarrassing and should be loaded on demand, so this is unacceptable and must be fixed.

How to Resolve embarrassment

So I am not embarrassed 😄, embarrassed is others, joke, joke, students please put the knife away, I must go to solve, but the solution has not been in the webpack hard, because ta really can not help, have not to ta that, not good hand, how to do?

Gulp comes to mind

What is gulp? Officially speaking

Gulp automates painful or time-consuming tasks in the development process, thereby reducing the time you waste and creating more value

Em ~ ~ ~ positioning is very clear, with the relief of distress.

The installation

Install gulp as a development-time dependency

Yarn add -d gulp-cli // or NPM install -d gulp gulp-cliCopy the code

Install the gulp command line tool

Yarn add -g gulp-cli // or NPM install -g gulp-cliCopy the code

Configuration gulp

In the project root directory, create gulpfile.js, which will be automatically loaded when running gulp. In this file, write the gulp task.

tasktask

There are two main types of tasks:

  • Public tasks are exported from gulpfile and can be invoked directly using the gulp command.
  • Private tasks are designed for internal use, often as part of a series() or PARALLEL () combination.

Tasks can be performed synchronously or asynchronously:

  • Series is synchronous, as inseries(task1,task2, task3)
  • Parallel is asynchronous, as inparallel(task1,task2, task3)

Post the code for this article first and then analyze it:

    /* gulpfile.js */.var del = require('del');
    function cleanGame(cb) {
    return del([
        'build/web-mobile',
    ]).then(() = >{ cb() process.exit(); }); }...exports.cleanGame = cleanGame; .Copy the code

Analysis of the

This method does not use plug-ins. The website recommends using plug-ins only for converting files and using Node modules or libraries (non-plug-ins) for all other operations. The original text reads as follows:

Plugins should always transform files. Use a (non-plugin) Node module or library for any other operations.

It is important to note that del introduced here is not a Node module, ta is a library, but you do not need to install TA manually. Why is that? Don’t ask, ask is my bare hand bit by bit analysis rely on find out 😂.

Here’s the key information I dug through a bunch of dependencies:

. webpack-dev-server: ...dependencies:... del"^ 4.4.1". .Copy the code

Webpack-dev-server already has this dependency, so you don’t need to install it manually. Don’t mistake it for Node.

The DEL library is also very simple to use. Pass in an array with a matching path, file or folder, try it out, and the TA will be returned with a Promise instance. You can execute callbacks using the.then method, where two functions are executed:

  • cb(): Since we did not return onestreamStream, so we need to manually execute the incomingcbTo inform the entire GULP process that the processing has finished. May have a lookstackoverflowThe passage is clear:

    By returning a stream, the task system is able to plan the execution of those streams. But sometimes, especially when you’re in callback hell or calling some streamless plugin, you aren’t able to return a stream. That’s what the callback is for. To let the task system know that you’re finished and to move on to the next call in the execution chain.

  • process.exit();Exit the command process,exitThe parameter iscodeDo not pass the default is 0, indicating success, execute this sentence, is hoping to end when the automatic exit process, save me manually end terminal 😁.

Here must emphasize: TA two execution order can not be reversed, will not report mistakes.

[08:32:38] The following tasks did not complete: cleanGame
[08:32:38] Did you forget to signal async completion?
Copy the code

Configuring the Startup Script

The command to execute is simple, just execute it:

    gulp cleanGame
Copy the code

Then configure the script commands in package.json for easy use and integration.

    "scripts": {..."cleanGame": "gulp cleanGame". }Copy the code

So far the basic configuration of gulp is ok 👌, through this command can directly tell the game package 🎮 after the package is removed, and gulp how to achieve integration command, elegant full automation, I think it is necessary to write a separate article, a good talk.

conclusion

Gulp tends to help out when Wabpack is inconvenient, and the Moderate message of Moderation is echoed.

Program source code