JIYIK CN >

It is very convenient to use webpack to compile and package react. This is also a common method. However, during use, you must pay attention to one detail, that is, the installation location of webpack and babel-loader .

React installation

Of course, to use react you must first install react and react-dom, the installation method is very simple (the premise is that we must have npm installed ).

# npm install react react-dom –save

React installation is so simple. In fact, react and react-dom are equivalent to js libraries. But we need a parser to parse the syntax of react.

React parser babel installation

The location where babel is installed is the purpose of this article. There are two installation locations for babel: one is global installation, and the other is local installation - that is, it is installed in the node_modules under the project directory.

# npm install babel-core babel-loader babel-preset-react –save-dev
//Local installation
#npm install babel-core babel-loader babel-preset-react –g
//Global installation

Generally, we choose local installation for easy management.

Installation of packaging tool webpack

Similarly, the installation location of webpack is also a point to note in this article. Of course, it also has two installation locations: global installation and local installation.

# npm install webpack –save-dev
//Local installation
# npm install webpack –g
//Global installation

If you choose to install locally, it will be more troublesome to use it, and we need to add the path before the command. So in general, it is installed globally, so that it can be used directly in any location.

Here we choose global installation. This will lead to the problem we are going to talk about.

Webpack configuration file writing

After installing webpack, let's write the webpack configuration file webpack.config.js. I won't write all of it here, just the loader part.

Code 1

module:{
    loaders: [
        {
            test: /\.js$/,
            loader: 'babel',
            query:{
                presets:['react']
            }
        }
    ]
}

Errors during compilation

Okay, now we have come to the key point. Now the configuration of our entire system is as follows: babel is installed locally, webpack is installed globally, and the webpack configuration file is shown in Code 1.

Next we will compile and package our project.

# webpack

After executing this command, you will find the following error:

ERROR in (webpack)/~/node-libs-browser/~/process/browser.js
Module build failed: Error: Couldn't find preset "react" relative to directory "/node/lib/node_modules/webpack/node_modules/node-libs-browser/node_modules/process"
……

This means that babel-preset-react cannot be found.

Okay, after saying so much, I finally brought up the issue we are going to discuss here (please don’t think I’m being long-winded here, we must always figure out why this problem occurs. What kind of configuration will cause this problem? Only after understanding it will it be easier to solve it).

Ways to solve the problem

When the above problems occur, we have three ways to solve them.

Method 1

It is very simple to solve this problem. We know that this problem occurs because bable and webpack are installed in different locations, so babel-preset-react cannot be found. Because there is such a code in the configuration file.

query:{
    presets:['react']
}

Well, now that we know that the installation location is different, we can install babel in a global location, so this problem will be solved.

#npm remove babel-core babel-loader babel-preset-react –save-dev
//First remove the previously installed babel
#npm install babel-core babel-loader babel-preset-react –g
//Global installation

Yes, the problem is solved. But we do not recommend this method. Because it is not easy to manage, so we should use other methods.

Method 2

This method is similar to the previous method. Method 1 is to change the installation location of babel, and here is to change the installation location of webpack. Originally webpack was installed in the global location, so it could not find babel-preset-react installed in the local project directory. Therefore, we can change the location of webpack.

# npm remove webpack –g
//Remove the original webpack
# npm install webpack –save-dev
//Install webpack to a local location, that is, in the node_modules under the project directory
# ln –s /project root directory/node_modules/webpack/bin/webpack.js /usr/bin/webpack
//In order to use webpack conveniently, here we create a soft link (that is, a shortcut) in the /usr/bin directory
//In this way, we can use the webpack command directly at any location.

At this point we have changed the installation location of webpack. Now both are installed in the same project directory. So it can be compiled correctly.

I personally recommend this method more than the first one, because it is easier to manage. However, this method is not without its drawbacks. If we have multiple projects, we need to install webpack in each project, which is very troublesome. So this method is not very good either.

Method 3

This method is the most recommended because there is no need to change the installation location of webpack and babel. webpack is still in the global location, and babel is still in the local project location. All we need to do is modify the webpack configuration file and add a line of code based on code one.

Code 2

module:{
   loaders: [
       {
           test: /\.js$/,
           loader: 'babel',
           exclude:/node_modules/,
           query:{
               presets:['react']
           }
       }
   ]
}

For a detailed introduction to exclude, please refer to webpack configuration .

All three methods have been introduced, and finally method 3 is recommended. I hope this article is helpful to you.