SoFunction
Updated on 2025-04-07

Webpack to build a react development environment

This article introduces the methods and steps for Webpack to build a react development environment, share it with everyone, and leave a note for yourself

Necessary dependencies list (npm install) is installed.

"dependencies": {
  "babel-core": "^6.26.3",
  "babel-loader": "^7.1.5",
  "babel-preset-env": "^1.7.0",
  "react": "^16.4.2",
  "react-dom": "^16.4.2",
  "webpack": "^4.16.5"
  ...
}

What is the babel series used for? It is to support the compilation of high-level syntaxes above es6. However, because react has jsx, it is not enough to simply babel. In addition, to make babel work on webpack, you need to add a loader to webpack (formerly the version was called loader, and the version started to use 'rules' instead), create a new file in the root directory of the project, and add the following code:

var path = require('path');
var node_modules = (__dirname, 'node_modules');
var deps = [ 
 ];

//The above code can be ignored. There is no need to add noParse, because there may be environment judgment in the dependency code, and if you cannot get the process variable in the browser, you will report an error!var config = {
  //This is the packaging entrance entry: (__dirname, './react/'),
 resolve: {
  alias: {
  }
 },
 //Open it into ./build/ file after packaging is completed output: {
  path: (__dirname, './build'),
  filename: '',
 },
 mode: 'development',
 module: {
   //The loader is placed here for the above rules. There is nothing to say about this paragraph. It is directly used from the official Webpack document.  rules: [
    {
     test: /\.js$/,
     exclude: /(node_modules|bower_components)/,
     use: {
      loader: 'babel-loader',
      options: {
        //One of the modules I just downloaded       presets: ['babel-preset-env']
      }
     }
    }
   ]
 }
};

//Transfer the dependencies to be excluded in your customization. Dependencies installed in node_modules generally do not need to be excluded.(function (dep) {
  var depPath = (node_modules, dep);
  [()[0]] = depPath;
  (depPath);
 });

 = config;

The above code can be used directly, please remove the comments first. With the above file configuration, you can directly add scripts to package yours.

...
"scripts": {
  ...
  "build-config": "webpack",
  ...
}
...

implementnpm run build-configPackaging operations can be performed, but so far there will still be an error. Because the babel setting is missing, the jsx syntax cannot be recognized when webpack is packaged. When is the jsx syntax? It is something similar to the dom structure written in js code, as follows:

...
<h1 onClick={(this)} style={{ color: "red" }}>
  {'Hello ' + }
</h1>
...

To parse this thing, you also need to add the .babelrc file, which is added in it:

{
  "plugins": ["transform-react-jsx"]
}

This sentence mainly means that when babel participates in packaging, the plug-in for converting js to js will be enabled. At this point, you can successfully type what you want

> webpack

Hash: e716d360a6a752006c09
Version: webpack 4.16.5
Time: 973ms
Built at: 2018-08-14 15:19:14
  Asset   Size Chunks       Chunk Names
 715 KiB  main [emitted] main
Entrypoint main = 
[./react/] 2.74 KiB {main} [built]
  + 21 hidden modules

The advantage of webpack packaging is that it can make your app load faster. For example, the package above has a total of 715kb, hiding 21 unused modules. This is why you need to use a scaffold to develop.

The pit of jsx-transform

There is another point to be said, that is, when introducing React, please introduce the entire one, or you can introduce additional APIs that it may use in the compiled code, otherwise you will say that something is not found and the page cannot be loaded. Look at the compiled code:

var _react = __webpack_require__(/*! react */ "./node_modules/react/");
var _react2 = _interopRequireDefault(_react);
...
_createClass(MyTitle, [{
key: "handleClick",
value: function handleClick() {
  ({
  text: "Clicked"
  });
}
}, {
key: "render",
value: function render() {
  return _react2.(
  "h1",
  { onClick: (this), style: { color: "red" } },
  'Hello ' + 
  );
}
}]);

If you do not introduce react, the _react2 in the render() function after compilation will be, and React obviously cannot find this variable. You may be able to understand more when you see the compiled code. Oh, this is what I mean when writing it in jsx dom...

Developed in Vscode, eslint needs to be configured

There are a lot of es6 writing methods in react. If you don't configure eslint, you will see a lot of eslint. First, install dependencies in the project's development environment:

"devDependencies": {
  ···
  "eslint": "^5.3.0",
  "eslint-plugin-import": "^2.14.0"
  ···
}

Add. under the project root path and add the following code [^eslint]:

{
 "parserOptions": {
   //Ecma version used  "ecmaVersion": 6,
  "sourceType": "module",
  //Use jsx features  "ecmaFeatures": {
   "jsx": true
  }
 },
 "rules": {
   //Ignore console warning  "no-console": "off",
  "semi": ["error", "always"]
 }
}

refer to:

  • eslint official documentation
  • babel-plugin-transform-jsx documentation
  • webpack4.15.1 official documentation
  • babelrc configuration documentation
  • React+Webpack Quick Start Guide (although it is outdated and some are not applicable, but it still borrows some code)
  • Ruan Yifeng Four-course training course, although outdated, can still take you to experience front-end development

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.