Configuration webpack

Webpack introduction

According to webpack’s website, Webpack is a modern JS application’s Bundler, which translates as a packer. Webpack eventually merges modules to form one or more bundles based on the dependencies between modules.

Install webpack scaffolding, and command line tools

yarn init

yarn global add webpack webpack-cli
Copy the code

Modifying the project Directory

Add dist folder, add an index. HTML file to dist folder, insert 

<! DOCTYPEhtml>
<html lang="zh-hans">
  <head>
    <meta charset="utf-8" />
    <title>toycra</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="main.js"></script>
  </body>
</html>
Copy the code

Add a SRC folder and create an index.js file in the SRC folder as the entry file for webPack startup.

var p = document.createElement('p');
p.innerText = 'test';

var root = document.getElementById('root');
root.appendChild(p);
Copy the code

Modify the WebPack configuration

Create a new webpack.config.js configuration file and configure the project entry and output directory. The default value for entry is./ SRC /index.js, and the default value for output is./dist/main.js.

Webpack itself follows the CommonJS module specification, so use require to import modules and module.exports to import modules.

__dirname represents the directory name of the current template, used in the webpack.config.js file, which is the root of the project, and path.resolve constructs the absolute path value from right to left based on the path passed in, resulting in /dist. You can also write the absolute path value as a local value, but this makes it difficult to share code.

const path = require('path');

module.exports = {
  entry: './src/index.js'.output: {
    filename: 'main.js'.path: path.resolve(__dirname, 'dist'),}};Copy the code

Test webPack packaging

After executing the webpack command, if you see such a prompt in the terminal, it means that the package is successful. Then you can go to the dist directory to find index.html and open it in the browser. When you see the HTML page, the webpack initialization phase is configured according to the fragments written by the JS script.

Configure the React

Install the React base library

Install the React basic component library first.

yarn add react react-dom
Copy the code

Install Babel

What’s a Babel?

According to Babel’s website, Babel is designed to convert ECMAScript 2015+ code into a backward compatible JavaScript syntax so that it can run in current and older browsers and other environments.

Babel provides a variety of plugins for converting different syntaxes. Plugins make it easy for Babel to cope with higher versions of native ES code. If you want to use the latest ES syntax, you need to introduce the corresponding plugin to convert, for example, if you only want to convert arrow functions in your code. Use @babel/plugin-transform-arrow-functions.

Babel also provides preset, which aggregates some of the plugins and uses a simple presets configuration, but presets introduce multiple plugins at the same time, and there may be unwanted plugin configurations. This results in a performance loss.

So follow the instructions on Babel’s website to install the following components:

  • @babel/core: the core module of Babel, which encapsulates the core code of other Babel into one piece for integrated development with other plug-ins; For example, to convert source code into an AST, the AST is an abstract syntax tree of the code, similar to a JSON-like tree structure, so that Babel plug-ins can parse the AST for code conversion
  • @babel/preset-env: Responsible for converting ECMAScript 2015+ version code to backwardness compatible JavaScript syntax
  • @babel/preset-react: The JSX code responsible for converting React and naming the API that supports React, for exampleReact.createxxxThe content such as
yarn add @babel/core @babel/preset-env @babel/preset-react -D
Copy the code

Install Babel – loader

yarn add babel-loader -D
Copy the code

Be familiar with the following parts of the Loader using WebPack:

  • What is the loader for Webpack – concept – loader

  • How to configure loader for Webpack — module.rules

  • Configuration mode of babel-loader: babel-loader

In short, loader provides webpack with the ability to handle all code except.js and.json. Babel-loader is one of many loaders that can call Babel code during webpack to handle React. ECMAScript 2015+ and other related code features.

Webpack officially provides three ways to configure loader and recommends using the configuration file to specify loader in module.rules. In this way, the configuration and code are separated, which makes the project more hierarchical and easier to maintain.

Configure babel-loader in module.rules as recommended.

module: {
  rules: [{test: /\.m? jsx? $/,
      exclude: /(node_modules)/,
      use: {
        loader: 'babel-loader'.options: {
          presets: ['@babel/preset-env'.'@babel/preset-react'].// If you use syntax such as properties or arrow functions in a class component, this plugin must be introduced
          plugins: ['@babel/plugin-proposal-class-properties'],},},},]; }Copy the code

Test JSX authoring

Create a test. JSX file in the SRC directory and write a component based on the React syntax

import React, { Component } from 'react';

export default class extends Component {
  render() {
    return <p>test</p>; }}Copy the code

Introduce the component in the previous index.js and render it to the page via reactdom.render

import React from 'react';
import ReactDOM from 'react-dom';
import TestComponent from './test.jsx';

ReactDOM.render(<TestComponent />.document.getElementById('root'));
Copy the code

Perform the Webpack and take a look at the output file from the dist directory. If nothing else, you can see that the root node of the page has rendered the

element in the component