Formal Learning react (2)

 

 

 

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:

Commonjs

Es6

 

 

AMD

 

 

 

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.

Less-loader

 

 

Node-sass

 

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:

 

Better:

 

 

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)