This is the seventh day of my participation in the More text Challenge. For details, see more text Challenge

Child component or parent component componentDidMount which to execute first

ComponentDidMount for the child component is executed first.

import React, { Component } from 'react'; Class Test extends Component{componentWillMount(){console.log(' componentWillMount ')} render(){return(<p>{this.props. Index}</p>) }} export default class TestPanel extends Component{componentDidMount(){console.log(' Parent Component is mounted '); } render(){ return( <div> <Test index={1}/> <Test index={2}/> <Test index={3}/> </div> ) } }Copy the code

Difference between Loader and Plugin in WePack

Loader:

Loader refers to the literal meaning of loading. Since WebPack itself can only package COMMONJS files, it is not possible to package CSS, images and other formats, so you need to introduce third-party modules for packaging. Loader is an extension of WebPack, but it only focuses on the transform area, completing compression, packaging, and language translation. Loader is run in NodeJS. Just to pack, just to pack, just to pack, say it three times!

For example, the CSS-Loader and style-Loader modules are used to package the CSS

Babel-loader and Babel-Core modules are used to convert ES6 code to ES5

Url-loader and file-Loader are used to package images.

What does a plugin do

Plugin does something that loader can’t do. Plugins are also designed to extend WebPack functionality, but plugins work on WebPack itself. Moreover, plugins are not limited to packaging and resource loading, but are much more versatile. It is powerful enough to handle a wide variety of tasks, from packaging optimization and compression to redefining environment variables. Webpack provides a number of plugins out of the box. The CommonChunkPlugin is used to extract third-party libraries and common modules. It is an optimized tool to avoid loading bundles on the first screen or on demand. In multi-page applications, it is possible to create bundles for shared code between applications on each page. Plug-ins can take arguments, so pass the new instance in the plugins property.

For example: the html-webpack-plugin for HTML file packaging and copying (and many other Settings). Not only does it copy and package the HTML file, but it also automatically adds code () to the HTML to import the js file after the packaging (), and also indicates that the JS file should be imported to the bottom of the HTML file, etc.

The code is as follows:

New HtmlWebpackPlugin({template:'./index.html',// template file, // The target HTML file is chunks:[' usePerson '],// the corresponding resource is loaded, that is, the JS module to be imported into the HTML file Inject :true// add resources to the bottom, import modules to the bottom of the HTML file})]Copy the code

In terms of the timing of the run

Loaders run before files are packaged (loaders are pre-processed files when modules are loaded). Plugins work throughout the compilation cycle.