React creates a project based on create-react-app,

React creates a project based on create-react-app,

What is create-react-app?

Create-react-app is a js library that allows you to easily create a react project, saving you the trouble of configuring webpack, debugging servers, and running scripts when creating a react project, you only need to use this library to create and initialize a react project with one click.

First, you need to use create-react-app to create a react project, you can refer to the https://github.com/facebookincubator/create-react-app

Note: The "[]" package contains customizable content. For example, cd [project-name] may actually be a cd my-app, it may also be a cd my-project. In short, the content of the "[]" package only represents the corresponding variables in the context.

npm install -g create-react-app  create-react-app [project-name] cd [project-name] 

After running the preceding command, it is already in the new project. At this time, run npm run start and npm run build. However, all configurations are hidden by default. to customize the configurations, run the following command:

npm run eject 

At this time, the system will prompt that the command is irreversible, whether to continue, and enter y, so that all the configuration items will come out. At this time, you can also make some customized configurations, such:

Modify the output location after build

By default, js, css, img, and other static resources are output to build-> static. The configuration items are in config-> webpack. config. prod. js.

1. Js has about 60th lines in the output attribute;
2. Css variable declaration at the beginning of cssFilename, about 38th rows;
3. There are about 143rd rows in the loader configuration of module-> rules;
   

The map file is controlled by the devtool attribute. If you do not want the map file, you can comment it out. There are about 57th rows;

Manifest. json contains about 294 rows in the configuration of ManifestPlugin;

The basic template is in the configuration of HtmlWebpackPlugin, but you can see that it is the './paths. js' file cited, so you need to modify the appHtml attribute in config-> paths. js;

By default, the build directory is cleared during build. The configuration item is scripts-> build. fs in js. emptyDirSync (paths. appBuild); If commented out, the old file will not be deleted (which may be used during gray release );

Other Configuration modification methods without eject

In addition to all the configuration files exposed by npm run eject, there are other ways to modify the configuration. For the reason of this topic, we do not expand it and only provide the relevant links.

The react-app-rewired plug-in is introduced to implement configuration coverage. You need to create a new config-overrides.js file in the root directory, you want to configure what to write (how to come up with a more configuration ...), You also need to rewrite npm start and other related commands. Click the link to view details.

Another example of Adding a CSS Preprocessor (Sass, Less etc.) is recommended on the git homepage of create-react-app. The general idea is to install a node environment to compile the sass plug-in node-sass-chokidar, then run npm start and watch-css simultaneously using npm-run-all (the command for listening to sass files ). I personally think it's a big circle. Let's discuss it again...

React and so on are not packaged as global variables

To use cdn, we often reference react or other script tags similar to libraries on the page, so that corresponding global variables are available in the browser environment and the js volume is reduced. The following uses react as an example.

First, add the following code to the configuration of config-> webpack. config. prod. js:

module.exports = {  ...  externals: {  'react': 'React',  'react-dom': 'ReactDOM'  },  ... } 

The key corresponds to the database name, and the value corresponds to the name of the global variable. Note that the global variable name must be consistent with the import name in the code.

In addition, you need to modify the template file configured by the html-webpack-plugin plug-in. Because you need to add global variables, add the corresponding script. Take public-> index.html as an example:

<! DOCTYPE html> 
Q: Since global variables exist in the browser, such as window. react, so you don't need to import React from 'react 'in the Code. Further, if you don't need to introduce react, what is the purpose of setting externals, is it true )?

A: As mentioned above, if the import and external are removed, the built files can run smoothly on the browser. However, if the server was started during development, the server could not analyze the reference, and hot update would not be possible. In addition, for the frontend and backend homogeneous structures, the server cannot find the dependency. Therefore, if you enable static file listening and manually refresh the browser, It is theoretically no problem not to import or external.
Install sass or less (take sass as an example)
npm install sass-loader node-sass --save-dev 
Or

npm install less-loader less --save-dev 
After installation, modify config-> webpack. config. dev. js and webpack. config. prod. js. modify them in the loader configuration of css:
First, test :/\. css $/Adds scss and sass. The second is to add a loader in use and directly add "sass-loader". You don't need to configure anything else (less ).

//test: /\.css$/ test: /\.(css|scss|sass)$/ ... use:[  {  ...  },  "sass-loader" ]
Add ant-design

Install antd and the on-demand Plug-In babel-plugin-import, refer to https://ant.design/docs/react/introduce-cn

npm install antd babel-plugin-import --save-dev 
In the options configuration of babel-loader in config-> webpack. config. dev. js and webpack. config. prod. js (or the. babelrc file), add the following code:

Plugins: [['import', {libraryName: 'antd ', style: 'css'}] // 'style: true' will load the less file]
If style: true is enabled, then less must be installed.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.