Parsing ES6

Webpack native supports JS parsing, but for some ES6 syntax, native Webpack is not very good support, this time we need to use babel-loader, use Babel configuration file, The file name is.babelrc, so we need to configure it in the webpack.config.js and.babelrc files.

Two concepts are important for Babel: Preset and plugins.

Plugins: Can be understood as a function.

Preset: is a set of Babel plugins.

👇 How does Babel support ES6 parsing

Install Babel related

 npm i @babel/core @babel/preset-env babel-loader -D
Copy the code

configure

  • create.babelrcfile

  • Modifying a Configuration File

Webpack. Config. Js file:

  • The test matched re is used to express which files satisfy the description
  • Use Indicates which loader is used

See the effect

Execute the command

 rm -rf dist
 npm run build
Copy the code

Parse React JSX syntax

The deployment environment

 npm i react react-dom @babel/preset-react -D
Copy the code

configure

Add react configuration to babelrc file

Then we modify the search file in the file:

The content of the modified search file is:

"use strict";

import React from "react";
import ReactDOM from "react";

const Search = () = > {
  return <div>Search Text</div>;
};

export default Search;

ReactDOM.render(<Search />.document.getElementById("root"));
Copy the code

Then repackage:

 rm -rf dist
 npm run build
Copy the code

See the effect

Add the search.html document to the dist directory

The document reads:

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./search.js" type="text/javascript"></script>
  </body>
</html>
Copy the code

Effect:

Parsing the CSS

The loaders we use at this time are CSS-loader and style-lodaer.

Css-loader: loads. CSS files and converts them to CommonJS objects.

Style-loader: Inserts the style into the head via the

The deployment environment

npm i style-loader css-loader -D
Copy the code

configure

Add csS-loader and style-loader configurations to webpack.config.js

Ps: style-loader must be placed before CSS-Loader. Webpack will make chain calls to multiple Loaders and pass the call results of style-loader to the next loader.

See the effect

Make the following changes in the search.js file:

"use strict";

import React from "react";
import ReactDOM from "react-dom";

import "./search.css";

const Search = () = > {
  return <div className="search-text">Search Text</div>;
};

export default Search;

ReactDOM.render(<Search />.document.getElementById("root"));
Copy the code

Make the following changes to the new search.css file:

.search-text {
  color: red;
}
Copy the code

Perform:

 npm run build
Copy the code

The final result is as follows:

Parse Less and Sass

Taking less as an example, SASS is the same principle.

Less-loader: applies to converting less to CSS.

The deployment environment

npm i less less-loader -D   
Copy the code

configure

See the effect

In the search.js file, make the following changes to introduce the style path:

"use strict";

import React from "react";
import ReactDOM from "react-dom";

import "./search.less";

const Search = () = > {
  return <div className="search-text">Search Text</div>;
};

export default Search;

ReactDOM.render(<Search />.document.getElementById("root"));
Copy the code

Change the previous search. CSS file to search.less

.search-text {
  color: red;
}
Copy the code

Perform:

 npm run build
Copy the code

The final result is as follows:

Resolution images

The loader used at this time is file-loader, which is used to process files

The deployment environment

npm i file-loader  -D
Copy the code

configure

Add file-loader configuration to the webpack.config.js file

See the effect

Add images to the search.js file and pack them:

"use strict";

import React from "react";
import ReactDOM from "react-dom";
import logo from "./images/test.png";

import "./search.less";

const Search = () = > {
  return (
    <div className="search-text">
      <img src={logo} />
    </div>
  );
};

export default Search;

ReactDOM.render(<Search />.document.getElementById("root"));

Copy the code

Perform:

 npm run build
Copy the code

The resulting directory is as follows:

The final result is as follows:

Parsing the font

Parsing fonts also uses file-loader

configure

See the effect

Add definitions to less files and introduce them

@font-face {
  font-family: "SourceHanSerifSC-Heavy";
  src: url("./image/SourceHanSerifSC-Heavy.otf") format("truetype");
}

.search-text {
  color: red;
  font-family: "SourceHanSerifSC-Heavy";
}
Copy the code

Url-loader parses images and fonts

In fact, there are some other methods for image parsing and font parsing, that is to use urL-loader.

Url-loader can also handle images and fonts and can be set to automatically base64 for smaller resources

We pass an argument to the loader via option. The configuration above means that when the image size is less than 10K, we automatically convert it to Base64