Webpack basics 1 stated that CSS files are packed directly into JS when webpack is packaged, but we don’t want to do this in the project, so we need to separate them out

1. Remove the CSS file to a separate file

Use mini-CSs-extract-plugin to extract CSS to a separate directory NPM I mini-CSs-extract-plugin-dCopy the code

In the configuration file

  const MiniCssExtractPlugin = require('mini-css-extract-plugin')
     
Copy the code

Used in plugins in configuration files, filename is used to package the CSS file to a specified file in the dist directory

After the packing location

And just like JS, the package is automatically imported into the HTML file

2. Webpack handles images

The way to call an image in a project is to use import to import it. I just wrote an example here

Packaging without loader will cause an error because the image cannot be parsed

Webpack also needs loader to process images. You can use file-loader or URl-loader to process imagesCopy the code

Url-loader depends on file-loader. Therefore, the file loader is automatically downloaded during the download

The two differences are not very big. The biggest difference in use is that urL-loader can convert images to Base64, which can reduce requests

The limit value is the maximum size of the image you want to convert to Base64. If the value exceeds this size, you cannot convert to Base64. Otherwise, you will see a long string in the browser. I’ve set it to 1*1024, which is 1KB

For example: the image below is 300 KB, I changed the limit value to 400*1024, so this is the base64 call used, but the image is too large, so this experience is not good, so I still define the limit size according to the actual situation in the work.

Note: images packaged as base64 will not be packaged into the specified folder

This is the time when the page is ready to view images. Look at img in your browser

When limit is reduced, the img tag is called using a path

You can see it’s just the limit size

3. The path error after the picture is packaged with the background picture

Take a look at the file path at development time

In the configuration file, the configuration of the image packaging path

The location of the CSS and IMG in the dist directory after the packaging, and the image of the img background after the packaging, you can see that the above is used relative path import, but the packaging is not “.. / “, this is handled by Webpack, so it must be an error when we put the package into production, because the CSS file does not have assets directoryHow to solve the above path error problem?

Using Webpack there is a property output.publicPath configuration

The explanation address of the official website

What is the path configured here? After removing the relative path in the background image path processing in THE CSS, the result is prefixed with what? If not, nothing is added

For example: I am not configuring publicPath now and have a look at the output path

Figure 1 is the browser rendering, Figure 2 is the code under development, Figure 3 is the code after packaging, you can see that after packaging “. The initial relative path is taken care of

So if I configure publicPath now let’s see

I set publicPath to “/init_webpack/dist/” because I put the packaged dist package in init_webpack, depending on the situation

As you can see from the image above, the path after publicPath is configured has changed, and the background can be seen correctly