This is the 25th day of my participation in the August Genwen Challenge.More challenges in August

preparation

Following the previous article, do the following preparations:

  1. delete02_WebPack Configuration File (CSS)In the directorynode_modules 和 buildFolder.
  2. in01_learn_webpackMake a copy under the directory02_WebPack Configuration File (CSS), and rename it as03_webpack handles other resources;
  3. To solve03_webpack handles other resources/SRC/CSS /test.cssFile warning issues in:fullscreenTo add some content such as:color: red;;
  4. Open theVS CodeTerminal, switch directory to03_webpack handles other resourcesRun,npm installInstall the dependencies required by the current project. After the installation is complete, the project directory is as follows:

file-loaderLoading image resources

We know that in real development, projects will have JS, CSS files, and rely on many other resources, such as image resources. Add the following two images (36.74KB and 287.60KB respectively) to the img directory:

Now, we want to use these two images in our project. Generally, there are two ways to use images:

  1. To create aimgElement, setsrcProperties;
  2. To create adivElement to set the background image;

/ SRC /js/component.js and add the following content circled in red:

// Create an img element and set the SRC attribute
// const imgEl = document.createElement('img'); // The first way to create an img element
const imgEl = new Image(); // The second way to create an img element
imgEl.src = require('.. /img/zznh.png').default; // We need to set the image as the resource in SRC, so we can't give an address directly, we can use require to load the resource
element.appendChild(imgEl);

// Create a div element and set the background image
const bgDivEl = document.createElement('div');
// Add width and height to display the div
bgDivEl.style.width = 200 + 'px';
bgDivEl.style.height = 200 + 'px';
// Add class to find the div later through the class selector and set the background image
bgDivEl.className = 'bg-image';
// Add a background color to display the div
bgDivEl.style.backgroundColor = 'red';
element.appendChild(bgDivEl);
Copy the code

/ SRC/CSS /index.css add the following contents circled in red:

.bg-image {
  background-image: url('.. /img/nhlt.jpg');
}
Copy the code

Here, we run the NPM run build command on the terminal to package the package. The result is as follows:

We find that packaging fails. Why? The reason is very simple, as we mentioned earlier, when we process a CSS file, webPack by default doesn’t know what to do with it, so it will report an error and it will tell us that we need a proper loader to process the CSS file. Now we have some other resources in our project (.jpg files,.png files) that WebPack doesn’t know what to do with either by default. So when we are ready to load the.jpg/.png image, Webpack will give an error message that says something like “module parsing failed, you may need a proper loader to handle this file type”.

Since WebPack doesn’t know how to handle these types of image files by default, we configure it to tell it how to handle them. Here, we need to use file-loader.

  • To process JPG, PNG and other images, we also need to have the corresponding loader: file-loader;

    • file-loaderIs to help us process itimport/require()wayImport file resources, and will put it on usOutput folder;
    • And of course we’ll learn how to change its name and its folder in a moment;

To use file-loader, first install it:

npm install file-loader -D
Copy the code

We then go to the webpack configuration file and write the corresponding rule to use file-loader:

{
  test: /.(png|jpe? g|gif|svg)$/,
  use: [
    {
      loader: 'file-loader'}}]Copy the code

Or for short:

{
  test: /.(png|jpe? g|gif|svg)$/,
  use: [
    'file-loader']}Copy the code

There is only one loader, so it can be further abbreviated as:

{
  test: /.(png|jpe? g|gif|svg)$/,
  use: 'file-loader'
}
Copy the code

Test attribute of the block of code corresponding to the regular expression, () group, matching parentheses in the string, can be a, can also be multiple, often with a | (or) symbol is tie-in use; ? Indicates that the preceding character appears 0 or 1 times.

After the above configuration, run the NPM run build command again to see the effect:

As you can see, there are no errors except for three warnings (which we’ll ignore). In addition to the bundle.js file, there are also two image files in the webPack output directory (in this case the build folder) :

These images are just two images packaged in the./ SRC /img directory, and they have already been introduced into the project as normal. Let’s go to the browser page and see what it looks like:

As you can see, images have been successfully introduced. To make the second image complete, we changed the code in./ SRC/CSS /index.css:

Background-size: contain; background-size: contain; Make the image fully displayed by setting display: inline-block; Make the background image of the div appear on the same line as the previous content.

Run the NPM run build command again to see the result:

In this way, both images will display normally

/ SRC /js/component.js: / / SRC /js/component.js: / / SRC /js/component.js: / / SRC /js/component.js

The browser page looks exactly the same after repackaging.

File-loader is used to load image files, but we probably won’t use it anymore because in Webpackage 5, there are new ways to replace it.

We already know that file-loader can load the corresponding image resources, but what it does now is very simple, just copy the image to the packaged directory, rename it, and then reference the renamed image files in the project.

Supplement:

    • Reason:file-loaderAbout the version in4.xVersion when passedrequire()I get the resources straight away, and I get them from5.xThe version starts,require()I got oneModuleObject that needs to pass through the objectdefaultAttributes to get resources. And what we have herefile-loaderVersion is newer, yes6.xVersion:

      So you have to go throughdefaultAttributes to get resources.
    • Solution: Modify the project directory./src/js/component.jsThe first of16Lines of code:

      And then run it againnpm run buildCompile.

  2. Is require() handled by file-loader?

    A: No, it is the regular expression rules corresponding to the test property of the Rule object that specify which files are processed by file-loader, not require(). Only files that match the rule are processed by file-loader. (Instead of requiring (), we specify the file to process.)