Webpack Best Practice Series (4)

7. Use Fonts 7.1. Install Font Library-font-awesome

We use NPM to install fonts

NPM Install Font-awesome--save

This time, our Package.json configuration file becomes this:

{  "name": "Code",  "version": "1.0.0",  "description": "",  "main": "Index.js",  "scripts": {    " Dev ":" Webpack ",    " Start ":" Webpack-dev-server ",    " test ":" Echo \ "Error:no test specified\" && exit 1 "
   },  "keywords": [],  "author": "",  "license": "ISC",  "Devdependencies": {    "Css-loader": "^ 0.28.7 ",    " File-loader ":" ^1.1.5 ",    " Html-webpack-plugin ":" ^2.30.1 ",    " Style-loader ":" ^0.19.0 ",    "Url-loader": "^0.6.2",    "Webpack": "^3.10.0",    "Webpack-dev-server": "^2.9.7"  },  " Dependencies ": {    " font-awesome ":" ^4.7.0 "  }}

　　

Note: When installing a third party package, we can use the following two commands

NPM Install Font-awesome--save

And

NPM Install Font-awesome--save-dev

The difference between the two commands is that--save installs a project dependency, packages the currently installed package as the project is published to the line, and--save-dev installs the package as a development dependency and will not be packaged with the project to be posted to the line, for example, a package like Webpack-dev-server , we are only used in the local development, easy to debug, and do not need to publish to the line, usually we will be developed as a dependent installation, such as Font-awesome, our online Web page will also be used, so we will package the release, so usually we will be installed as a project dependencies, To develop the installation information for a dependency package under Devdependencies This property in Package.json, the installation information for the project dependency package is below the Dependencies property in Package.json

7.2. Use the Font library

Introduced in the Index.js file

Introduce a CSS file with fonts to test whether Webpack supports font bulk import "Font-awesome/css/font-awesome.css"

At this point, we start with the NPM Start command to see the effect, and a familiar error is reported

Rror in./node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0module Parse failed:unexpected character " (1:0) You may need a appropriate loader to handle the this file type. (Source code omitted for this binary file) @./node_modules/css-loader!. /node_modules/font-awesome/css/font-awesome.css 6:645-696 @./node_modules/font-awesome/css/font-awesome.css @./ Src/index.js @ multi (webpack)-dev-server/client?http://localhost:8080./src/index.js

The error means that we need to use a loader to handle the font file, now go to open font-awesome.css this file, to see exactly what is inside (this file location in node_modules/font-awesome/css/ FONT-AWESOME.CSS)

@font-face {  font-family: ' Fontawesome ';  Src:url ('.. /fonts/fontawesome-webfont.eot?v=4.7.0 ');  Src:url ('.. /fonts/fontawesome-webfont.eot? #iefix &v=4.7.0 ') format (' Embedded-opentype '), url (' ... /fonts/fontawesome-webfont.woff2?v=4.7.0 ') format (' woff2 '), url ('.. /fonts/fontawesome-webfont.woff?v=4.7.0 ') format (' Woff '), url ('.. /fonts/fontawesome-webfont.ttf?v=4.7.0 ') format (' TrueType '), url ('.. /fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular ') format (' SVG ');  Font-weight:normal;  Font-style:normal;}

Through the contents of the Font-awesome file above, we know that it introduces the font files in its parent folder fonts, which include:. EOT,. svg,. ttf,. Woff,. WOFF2, etc. The error message tells us that Webpack does not support packaging files in these formats, so what loader should we use to get webpack support to package these files?

Let's review what File-loader did.

1. 将文件移动到输出目录2. 自动处理url后面的文件路径，得到一个最终的引用路径

When the file is moved to the output directory, and there is a final correct path, we can use the file correctly, so we try to use File-loader to support the font files in those formats.

Add configuration in Webpack, use File-loader by setting matching rules for font formatting, and work with images

Working with the literal {    test:/\. EOT|SVG|TTF|WOFF|WOFF2) $/, use    : [' File-loader ']}

Next, we package it by command

NPM Run Dev

This time, you will find dist This output directory has more than a few font files

We will then go to test, our fonts can not be used normally, we are in SRC below the index.html file to enter the following, the introduction of the icon

<div id= "App" >    <i class= "fa Fa-bath" aria-hidden= "true" ></i>    <i class= "fa Fa-envelope-open "aria-hidden=" true "></i>    <i class=" fa fa-microchip "aria-hidden=" true "></i >    <i class= "fa fa-user-circle-o" aria-hidden= "true" ></i></div>

Then we need to run the command again to package

NPM Run Dev

After the file is packaged, we run the HTML file directly, note: This time do not go through the server to access, direct local browser open just fine

When opened, if you see the icon we introduced, it proves that Webpack has supported the introduction of fonts properly.

What is 8.babel related 8.1.babel?

Babel is a JavaScript compiler that uses a wide range of ES6 to convert to ES5 and runs in browsers that don't support ES6, which means you don't have to worry about whether the browser supports ES6 when you write ES6 code.

Click to enter Babel Chinese address

Click to enter Babel official address

8.2. Using Babel

We create a new Babel-demo directory to demonstrate the use of Bebel, and after entering the Babel-demo directory, run the command initialization project

NPM init-y

The purpose of this command is to generate a Package.json file in the Babel-demo directory.

Next, we need to install BABEL-CLI

NPM Install--save-dev BABEL-CLI

　　

BABEL-CLI is a command-line tool that we can transcode at the command line with the Babel command after installation

After installation, we write a code to test the Babel transcoding function, create a new Index.js file under the Babel-demo directory, and write the following code:

() = Console.log ("Hello nodeing.com")

　　

Next, compile the index.js with the Babel command.

./node_modules/.bin/babel Index.js

　　

If you want to lose every time you run Babel./node_modules/.bin/babel such a long list of commands, you can configure this command to Package.json

{  "name": "Babel-demo",  "version": "1.0.0",  "description": "",  "main": "Index.js",  "scripts": {    "Test": "Echo \" Error:no test specified\ "&& exit 1",    "Build": "./node_modules/.bin/babel index.js"  },< c8/> "keywords": [],  "author": "",  "license": "ISC",  "Devdependencies": {    "babel-cli": "^6.26.0"  }}

　　

At this point, we start compiling with NPM's command.

NPM Run Build

　　

After the result of the run, the contents of index.js are output as is, why does Babel not compile our index.js file?

The reason is that Babel is based on plug-ins, plug-in is to provide some extension features, if not tell Babel with which plug-in to do things, then Babel will not handle

8.3.babel Plug-in

As we mentioned earlier, Babel is based on plug-ins, and doing different things requires different plugins, which makes Babel very flexible and powerful.

Click to open the Babel Plugin documentation page, Chinese address

Click to open the Babel plugin documentation page, English address

We go to find transform-es2015-arrow-functions this plug-in, click to see its use, the function of this plugin is to help us to es2015 (ES6) the arrow function compiled into ES5 code

Now let's install the plugin.

NPM Install--save-dev babel-plugin-transform-es2015-arrow-functions

　　

After installation, we need to create a new. babelrc file in the Babel-demo directory, which is the Babel configuration file, and we add the configuration in this configuration file

{    "plugins": [      "Transform-es2015-arrow-functions"    ]}

　　

Then, run the NPM command to see the effect

NPM Run Build

　　

Operation Result:

(function () {  _newarrowcheck (this, _this);  return Console.log (1);}). Bind (this);

　　

Next, we go to modify the Index.js file and add the other ES6 syntax

() = Console.log (1) class demo{}

　　

Then go to the NPM Run build command, the result is the same output, this is the same reason as we encountered earlier, it needs to install another plug-in to let Babel work, or do nothing

NPM Install--save-dev babel-plugin-transform-es2015-classes

　　

Once installed, you also need to modify the. babelrc file to add configuration

{    "plugins": [      "Transform-es2015-arrow-functions",      "Transform-es2015-classes"    ]}

　　

Next, you can run the NPM run build command to see the effect.

function _classcallcheck (instance, Constructor) {if (!) ( Instance instanceof Constructor) {throw new TypeError ("Cannot call a class as a function");}} (function () {  return Console.log (1);}); Let demo = function demo () {  _classcallcheck (this, demo);};

　　

The above is the Babel plug-in use method

8.4.babel of Preset

Through the plug-in learning, we know that Babel to resolve the conversion ES6 syntax, need to install the corresponding plug-in, we just used to two es6 the syntax of two plug-ins, when we need to use a lot of ES6 syntax, it will need to install very many plug-ins, which seems very troublesome, So is there a simple way to do it?

Babel through preset to solve the problem we raised above, preset is called a preset, meaning that pre-set some common syntax configuration, a batch of commonly used related plug-ins packaged to meet our development, for example: when we deal with ES6 syntax, We put together the grammar plug-in with the ES6 related to form a preset, this preset is called es2015, so when we download a es2015 this preset, is essentially to download a batch and ES6 related syntax plug-in, so that we do not have to download the configuration plugin every time

Installing preset-es2015

NPM Install babel-preset-es2015--save-dev

　　

After installation, you need to modify the. BABELRC configuration file

{    "presets": [        "es2015"    ]}

　　

Finally, using the NPM Run Build command, view the results of the compilation

8.5.webpack and Babel

Let's switch the directory to the Webpack-demo directory, modify the Webpack-demo under Index.js to add the following section ES6 code

Tests whether ES6 is compiled into ES5 () =>console.log ("Hello nodeing!!!")

　　

Then run the command to view the results

NPM Run Dev

　　

In the packaged app.js file, we see that the ES6 code we wrote is output, Webpack does not compile the ES6 code into ES5

To get the ES6 code compiled, we need the power of Babel, where we need to install Babel-loader and Babel-core and the presets for the ES6 syntax, Babel-loader is the ES6 code for Babel-core processing, Babel-core is the core API of Babel work.

Installing Babel-core and Babel-loader and handling presets for ES6

NPM Install Babel-loader babel-core babel-preset-es2015--save-dev

　　

Create a new. babelrc file in the Webpack-demo directory to add Babel configuration

{    "presets": [        "es2015"    ]}

　　

Next you need to add the configuration item in the Webpack.config.js file

Add the following code to the rules rule number

{    test:/\.js$/,    use:[' Babel-loader '}

　　

Run the NPM run dev command to package index.js into App.js, and in app.js we see that the original ES6 code has been successfully converted into ES5 code.

Tests whether the ES6 is compiled into ES5 (function () {  return console.log ("Hello nodeing!!!");});

　　

8.6. Optimize Babel-loader

When we write this regular expression (/.js$/), it means that all JS files will be sent Babel-loader loaded, and then handled by Babel-core side, this includes many of our installed third-party packages, you will find Node_ Modules folder will have a lot of JS files, but these JS files have been packaged by the developer we can directly use, do not need us to deal with again, so if Babel-loader again to deal with, will waste too much time, resulting in Webpack packaging compilation is very slow , we need to optimize it now. The specific practice is to eliminate the need to compile again, let Babel-loader only deal with the source files we developed, so we need to modify the configuration in the Webpack.config.js

{    test:/\.js$/,    use:[' Babel-loader '],    exclude:path.resolve (__dirname, ' Node_modules ')},

　　

Among them, Exclude:path.resolve (__dirname, ' node_modules ') This statement means to exclude node_modules this folder, because this folder is a third-party package, do not need us to use Babel to compile the

Running NPM run Dev again will find it much faster when you pack.

Webpack Best Practice Series (4)