Formal Learning react (2)

Source: Internet
Author: User
Tags md5 hash




Today, we will finish learning the webpack that we have not completed in the previous article:

I have mentioned the use of CSS webpack before. We talked about

Extracttextplugin to manage CSS separately

I wrote about CSS in module. loaders:
Module :{
Loaders :[
// Extract CSS during build
Test:/\. CSS $ /,
Loader: extracttextplugin. Extract ('style', 'css '),
Include: Paths

I also talked about CSS? The query function of modules. Now we will use Babel and Babel-loader to support es6!
By default, you are familiar with the following modules:








All the preceding format specifications are supported by webpack.

Bytes --------------------------------------------------------------------------------------------------------------

Now let's talk about the definition of Loader:


loader(Receiving string)

loaders(Receiving array)


The above are all arrays, so all are written as loaders.



The webpack loader is sequential. Remember that it is from right to left, from right to left, and from right to left. The important thing is said three times!


loaders: [‘style‘, ‘css‘]Relativestyle(css(input)), There is no difference between the two.

Bytes ---------------------------------------------------------------------------------------------------------------------------

After talking about the order, let's talk about the parameters. Do you still remember the previous modules?


Passing parameters to a loader

{Test:/\. jsx? $ /,

Loaders: ['babel? Cachedirectory, presets [] = react, presets [] = es2015 '],

Include: paths. app


We used to write this method before, but the reading performance is poor. We recommend the following method:


{Test:/\. jsx? $ /,

Loader: 'Babel ',

Query: {cachedirectory: True,

Presets: ['react ', 'es2015']},

Include: paths. app




Also, I have recommended include: this key, which can also receive array if string is accepted;

Certificate --------------------------------------------------------------------------------------------------------------------------------------------------------------

I have introducedExtractTextPluginThis plug-in is used to output the CSS file to your build.

Certificate ---------------------------------------------------------------------------------------------------------------------------------------------------------------

Loading CSS

It parses the styles in the givenincludePATH (accepts an array too) while making sure only files ending.cssAre matched.

The definition then applies bothStyle-loaderAndCSS-loaderOn it:

The general idea is that you have written the include statement under your module. loaders. The webpackage can only find the file ending with .css under this file.Style-loaderAndCSS-loaderTo operate these CSS files.


The whole process is that webpack will judge these files, and then convert the fields declared by @ import and URL () into the require field in the matched file, and then use style-loader,

Next we will introduce file-loader or URL-loader.


PS: If you want to ensure that CSS can also use sourcemaps. You can use ['style', 'css? Sourcemap']

Set output. publicpath to absolute path.


Of course, we may use less and sass in the project.






You can use import in the less/SASS file:


You can also directly load data from the node_modules folder.


You can also learn about it yourself.

Bytes ---------------------------------------------------------------------------------------------------

This slows down our project, probably because we need to load many small resources. After all, each request carries an overhead.

HTTP/2 will help change the status quo in this regard.


Webpack allows you to load resources inline in your code, but you need to use the URL-loader. He will

Translate to base64 in your JavaScript bundles.

Bytes -----------------------------------------------------------------------------------------------

Setting up URL-loader

We useURL-loaderIs a good choice. Because you may not care about the size of the generated package.

It has a restriction option that is used after certain restrictions are met (delay imageFile-loader ).

Specifically, URL-loader downloads the resources to be downloaded from some URLs! Then it is base64-encoded.

Inline into our bundles JS file. Can reduce the overhead. However, if the file is too large, we may not be able to wait.

Let's load it in the browser. This is the role of limit.

In this way, images smaller than 25 KB will be directly inserted in the code in base64 format, reducing an HTTP request.

Style. js


Webpack. config. js



After running webpack:




Setting up File-loader

URL-loader is the upper-layer encapsulation of file-loader. If you ignore the inline URL, you can directly use file-loader.


The following setup customizes the resulting filename. By defaultFile-loaderReturns the MD5 hash of the file's contents with the original extension:

Developers can customize their own file names based on their needs. The default value isFile-loaderAn original extended file with MD5 hash is returned.

However, I have defined the file name here. After packaging and processing:


You may be interested in packaging SVG, compressing images, and other loaders.

Certificate ----------------------------------------------------------------------------------------------------------------------------------------------------------------------

We often use various fonts for our website: Finally, we will introduce the packaging of fonts:

You can use file-loader or URL-loader to package fonts. The simplest method is as follows:





Sometimes in order to weigh the performance and beauty of the website, we may discard the inline method [add request], directly choose to pack, and pack a variety of font styles:



So far, the basic content of webpack is introduced. The last article will introduce the principles of webpack -------------------------------


Formal Learning react (2)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.