Babel-loader configuration process JSX grammar

In webpack in, JSX syntax is not recognized webpack, webpack default file can only handle .js file extension, you need to install a third-party loader handle non-js file.

The JSX syntax, you can use babel-loader process.

A reference to the official website to start the configuration, but the error message is displayed or JSX does not recognize the syntax error configuration is as follows:

• installation

npm install -D babel-loader @babel/core @babel/preset-env

• Configuration webpack.config.js

Module: { // all third-party modules matching rules, webpack default file can only handle .js extension, you need to install third-party Loader 
        rules: [ 
            { 
                the Test: /\.m?js$/ , 
                use: { 
                    Loader: 'babel-Loader' , 
                    options: { 
                        the Presets: [ '@ babel / PRESET-env' ] 
                    } 
                }, 
                exclude: / (node_modules | bower_components) /, // do not forget to add exclude options, or run may be error 
            } , 
        ] 
    }

• Configuration .babelrc

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-proposal-object-rest-spread"]
  }

Check some solutions online, and find their own way a bit and need to install @ babel / preset-react, and modify .babelrc configuration.

The final correct webpack 4.x version of babel-loader configuration corresponding to the following, if you do not configure the corresponding version, there will be a lot of problems.

• installation

  npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react

• Configuration webpack.config.js

  Module: { // all third-party modules matching rules, webpack default file can only handle .js extension, you need to install third-party Loader 
          rules: [ 
              { 
                  the Test: /\.m?js$/ , 
                  use: { 
                      Loader: 'babel-Loader' , 
                      options: { 
                          the Presets: [ '@ babel / PRESET-env' ] 
                      } 
                  }, 
                  exclude: / (node_modules | bower_components) /, // do not forget to add exclude options, or run may be error 
              } , 
          ] 
      }

   

• .Babelrc configuration file

  New .babelrc file in the root directory of the project, and configured as follows

  { "presets":["@babel/react","@babel/env"]}