I’ve done this many times, and I always feel like I don’t know how to start. Crustily skin of head to do the road slowly after a few leisurely, but in the end, after the completion of back again forget their own building project, so that every time want to build projects have a headache, this time determined I will I recorded the process of building project, reserved for later build reference of the project, to start his own buddy a reference building project, If there is something wrong, I hope the bigwigs will criticize and correct.

start

1. Firstly, choose the technical framework we are familiar with or like, because REACT is the framework I use in my daily work, so I will still use React this time. As for whether to use scaffolding, I decide to use scaffolding this time. Whether you’re using scaffolding or not, webPack configuration needs to be generally understood, but I’m going to save myself the hassle of using create-React-app scaffolding. What I want to do for this project is taste TS. Just listening to all kinds of online incense, I can’t help but try it

2. Start creating projects (see the documentation for your framework of choice for this step). Here we use TypeScript, which you can run in the console: my-app is the name of the project you want to create and you can change it to whatever you want

$NPX create-react-app my-app --typescript $$yarn create-react-app my-app --typescriptCopy the code

In this way, we can open the project we created just now, my-app, and execute NPM start under this project. The default port number is 3000 (when the 3000 port of your computer is occupied, it will automatically confirm to you that it is enough to change the port, at this time you can choose by yourself). At this point, the web page http://localhost:3000 will be opened. This is what crA did for us in the first place

  1. Cra presets a lot of configuration so you can focus on your code, and it’s all hidden. What if we want to customize it

Solution a:

npm run eject
Copy the code

Note: This is a one-way operation. Once you eject, you can’t go back! This command removes a single build dependency from the project.

Instead, it copies all configuration files and delivery dependencies (Webpack, Babel, ESLint, etc.) into the project so that you have full control over them.

Scheme 2: Use react-app-rewired, customize-cra

First, react-app-Rewired is an open-source tool for modifying CRA configurations in the React community. For example, it extends the Webpack configuration of the Create React App. Customize-cra provides a set of Create React app V2 configurations to customize the react-app-rewired core functionality, which can be extended to the Webpack configuration through the config-overrides

1. Install customize-cra react-app-rewired first

yarn add customize-cra react-app-rewired --dev
Copy the code

2. After the installation, we create a new config-overrides. Js file in the root directory of the project (the same directory as package.json). This function will be overridden with the newly modified configuration object. The following

“scripts”: {

  • “start”: “react-scripts start”,
  • “start”: “react-app-rewired start”,
  • “build”: “react-scripts build”,
  • “build”: “react-app-rewired build”,
  • “test”: “react-scripts test –env=jsdom”,
  • “Test “: “react-app-rewired test –env=jsdom”, “eject”: “react-scripts eject”} Note: do not replace the eject part. There is no configuration substitution for eject in the tool,

4. Then we can customize the configuration we need. For example, we need to install less and less-loader before using less

Yarn add less yarn add --dev less-loader or: NPM I less NPM I -d less-loaderCopy the code

Then modify config-overrides. Js as follows

So let’s change the original CSS file in the project to less and run it to see the effect

Then a less configuration is complete, and any other related configurations that might be used have git addresses

The next thing I use most often in projects is publishing, so the main focus on publishing is publicPath and path in package.json

Path: Specifies the destination path for all output files, typically our dist folder. PublicPath: specifies the directory of all parsed files. The URL is relative to index.html.

How do you configure this using create-react-app?

. (config) => {// Expose webPack configuration config,evn config.output.publicPath ='/'
       returnconfig; }...Copy the code

Ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha

. (config) => {// Expose webpack config,evn config.output = {publicPath:'/'
        }
        returnconfig; }...Copy the code

In this case, we need to configure other configurations in output, and we use the current path.