Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you the relevant knowledge of what details you need to pay attention to when compiling react in webpack. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

It is very convenient to use webpack to compile and package react. This is also a common way for people. But in the process of using, be sure to 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, and the installation method is simple (as long as we have npm installed).

# npm install react react-dom-save

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

React parser babel installation

The location of the babel installation is the purpose of this article. Babel has two installation locations: a global installation and a local installation-that is, under node_modules in 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

In general, we choose to install locally, which is easy to manage.

Installation of the packaging tool webpack

Similarly, the installation location of webpack is also a point to pay attention to 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 a path before the command. So it is usually a global installation, so it can be used directly from any location.

Here we choose the global installation. Only in this way can there be the problems 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, only the part that loads loader.

Code one

Module: {

Loaders: [

{

Test: /\ .js $/

Loader: 'babel'

Query: {

Presets: ['react']

}

}

]

}

Errors in the compilation process

All right, here we go. Now the configuration of our entire system is as follows: babel is installed locally, webpack is installed to a global location, and the webpack configuration file is shown in Code 1.

Next we're going to compile and package our project.

# webpack

After executing the 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"

……

That means no babel-preset-react can be found.

Well, having said so much, it finally leads to the problem that we are going to discuss here (here we should not dislike me for being verbose, why there is such a problem, we should always find out the reason. What kind of configuration will have this problem, it will be easy to solve it after you know it.

The way to solve the problem

After the emergence of the above problems, we have three ways to solve them.

Mode one

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 piece of code in the configuration file.

Query: {

Presets: ['react']

}

Well, since we know that the installation location is different, then we can install babel in the 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

That's right. Problem solved. But we do not recommend this approach. Because this is not easy to manage, other ways are still used.

Mode two

This way and way are more or less the same. The first way is to change the installation location of babel, and here is to change the installation location of webpack. Previously, webpack was installed to a global location, so the babel-preset-react installed in the local project directory could not be found. So we can change the location of the webpack.

# npm remove webpack-g

/ / remove the previous webpack

# npm install webpack-save-dev

/ / install webpack to a local location, that is, in node_modules under the project directory

# ln-s / project root / node_modules/webpack/bin/webpack.js / usr/bin/webpack

/ / to facilitate the use of webpack, here we set up a soft connection (that is, a shortcut) in the / usr/bin directory

/ / so we can directly use the webpack command anywhere.

At this point, we have changed the installation location of webpack. Both are now installed in the project directory. So it can be compiled correctly.

This way is better than way one, I personally recommend this way, it is more convenient to manage. However, this approach is not without drawbacks. If we have multiple projects, then we need to install webpack under each project, which is very troublesome. So this way is not very good.

Mode 3

This approach should be said to be 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 under the local project location. All we need to do is modify the configuration file of webpack and add a sentence of code to Code one.

Code two

Module: {

Loaders: [

{

Test: /\ .js $/

Loader: 'babel'

Exclude:/node_modules/

Query: {

Presets: ['react']

}

}

]

}

These are all the contents of the article "what details do you need to pay attention to when webpack compiles react?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.