In layman's React (ii): React development Artifact Webpack

Previous we have a general understanding of react, before introducing the technical details, let us first look at the main tools for react development and module management Webpack. Called react development artifact a bit of a title party, but Webpack is really the most powerful front-end module management and packaging tools I have ever seen. Although Webpack is a generic tool and not only suitable for react, many react articles or projects use Webpack, especially React-hot-loader, which makes Webpack the most mainstream react development tool.

Commonjs and AMD are two major specifications for JavaScript module management, which defines synchronous loading of modules, primarily for Nodejs, while the latter is asynchronous loading, and is suitable for the front end through tools such as Requirejs. As NPM becomes the mainstream JavaScript component publishing platform, a growing number of front-end projects are also dependent on the project on NPM, or they will be published to the NPM platform themselves. Therefore, making it easier for front-end projects to use the resources on NPM becomes a big requirement. The result is a tool like browserify that can be introduced into the NPM module directly in the code using the Require function, packaged and then executed by the browser.

Webpack is actually a bit like browserify, from Facebook's Instagram team, but more powerful than browserify. The main features are as follows: support for both COMMONJS and AMD modules (recommended for new projects, direct use of COMMONJS), Tandem Module loaders and plug-in mechanisms for greater flexibility and extensibility, such as providing support for Coffeescript, ES6; Can be packaged into multiple files based on configuration or intelligent analysis, implement public modules or load on demand, support the packaging of CSS, images and other resources, without the help of grunt or gulp, the development of the package in memory, faster performance, can fully support the development process of real-time packaging requirements; Good support for Sourcemap, easy to debug.

Webpack all of the static resources used in the project are considered as modules, and the modules can depend on each other. Webpack them in a unified management and packaging release, the official homepage of the following chart to illustrate the role of Webpack:

You can see that the goal of Webpack is to manage the static resources in the project, and provide the best package deployment plan for the final release of the product. This article will give you a general introduction to its usage around react so that you can apply it to your actual projects. install Webpack and load a simple react component

Webpack is generally installed as a global NPM module:

NPM install-g Webpack

Then there is the Global Webpack command, which executes this command by default using the current directory's webpack.config.js as the configuration file. If you want to specify a different configuration file, you can do this:

Webpack-config Webpack.custom.config.js

Although webpack can specify parameters from the command line, we typically define all relevant parameters in the configuration file. In general, we define two profiles, one for development and the other for product launches. Packaged files in a production environment do not need to contain code such as Sourcemap for development. The configuration file is usually placed under the project root and is itself a standard COMMONJS module.

One of the simplest webpack configuration files Webpack.config.js is as follows:

Module.exports = {
  entry:[
    './app/main.js '
  ],
  output: {
    path: __dirname + '/assets/',
    Publicpath: "/assets/",
    filename: ' bundle.js '
  }
;

Where the entry parameter defines the packaged portal file, all the files in the array are packaged sequentially. Each file is dependent on the recursive lookup until all related modules are packaged. The output parameter defines the location of the exported file, where the commonly used parameters include: path: The absolute path to a packaged file Publicpath: Access path to the Web site runtime filename: file name after packaging

Now look at how to package a react component. Suppose you have the following project folder structure:

-React-sample
  + assets/
   -js/
     hello.js
     entry.js
   index.html webpack.config.js

Where hello.js defines a simple react component, using the ES6 syntax:

var React = require ('react');
class Hello extends React.Component {
  render () {
    return (
      <h1> Hello {this.props.name}! </ h1>
    );
  }
}
entry.js is the entry file that outputs a Hello component to the interface:

var React = require ('react');
var Hello = require ('./ Hello');
React.render (<Hello name = "Nate" />, document.body);
The content of index.html is as follows:

<html>
<head> </ head>
<body>
<script src = "/ assets / bundle.js"> </ script>
</ body>
</ html>
Here Hello.js and entry.js are JSX component syntax, they need to be pre-processed, which will introduce webpack's JSX loader. So add the following configuration to the configuration file:

module: {
  loaders: [
    {test: /\.jsx?$/, loaders: ['jsx? harmony']}
  ]
}
The concept of the loader will be introduced in detail later, only need to know that it can compile JSX into JavaScript and load it as Webpack module. In this way, after executing the webpack command in the current directory, bundle.js will be generated in the assets directory, and the contents of entry.js will be packaged. When the browser opens index.html on the current server, it will display "Hello Nate!". This is a very simple example that demonstrates how to use Webpack for the simplest React component packaging. Load AMD or CommonJS module

In the actual project, the code is organized by modules. AMD is based on CommonJS and takes into account the asynchronous loading characteristics of the browser. It allows modules to be loaded asynchronously and execution order guaranteed. The CommonJS require function is loaded synchronously. In Webpack, I recommend the CommonJS way to load modules. This way the syntax is more concise and intuitive. Even during development, we load the files packed by Webpack and debug them through sourcemap.

In addition to the module of the project itself, we also need to rely on third-party modules. Now the more commonly used third-party modules are basically released through npm. There is no need to download and manage them separately. You can run npm install when needed. For example, we need to rely on jQuery, just execute:

npm install jquery —save-dev
In more cases, we perform dependency management in the package.json of the project, and then install all dependencies by directly executing npm install. In this way, the code of the project does not need to store the code of the actual third-party dependent library.

After installation, the module that needs to use jquery needs to be introduced in the head:

var $ = require ('jquery');
$ ('body'). html <