This is the 15th day of my participation in Gwen Challenge

1, before the words,

Recently, the company needs to build a new small project. It has been considered for a long time that react has not been used. We plan to simply build a front-end framework with React and record the construction process of this project.

One option: build manually with React + Webpack

One option is to create the React scaffolding and override the configuration file with config-overrides.

React + WebPack: Install the react + webPack plugin.

React scaffolding creates a project that needs to modify the configuration file, but doesn’t want to execute reject, afraid of generating a lot of garbage code, so try using config-overrides to override the required functionality

2. Scheme 1: React + Webapck project construction

1, mkdir react-webapck
2, cd react-webpack
3Json file NPM init-y4NPM install webpack webapck-cli webpack-dev-server --save-dev5Create a new SRC /index.js file6, in package.json"build":"webpack"NPM run build webpack by default looks for the SRC /index.js package entry and generates dist/main.jsCopy the code
7, configure HTML template NPM install -d html-webpack-pluginCopy the code
const HtmlWebpackPlugin = require('html-webpack-plugin')
new HtmlWebpackPlugin({
      filename: resolve('. /.. /dist/index.html'),
      template: "index.html".inject: true.// The default value is true. The script tag is located at the bottom of the body of the HTML file
      hash: true.minify: {
        removeComments: true.// Remove the comment
        collapseWhitespace: true.// Compress whitespace
        removeAttributeQuotes: true // Remove quotes from labels}}) modify package command:"build": "webpack --config build/webpack.config.js".Copy the code
NPM install -d webpack-merge install -d webpack-mergeCopy the code
9. React NPM install -s React React -dom Install Babel NPM install -d @babel/ core@babel /preset-env @babel/preset- React NPM Install -d @babel/ plugin-transform-runtime@babel/runtime@babel/runtimecorejs2 @babel/core Babel core library @babel/preset-env converts ES6, ES7 syntax to ES5 @babel/preset- runtime converts REACT syntax to ES5 @babel/plugin-transform-runtime supports some es6, ES7 new syntax below the root directory: create.babelrc filesCopy the code
{ "presets": [ ["@babel/preset-env", { "modules": false, "target": { "browsers": [">1%", "last 2 versions", "not ie <= 8"] } }], "@babel/preset-react" ], "plugins": [["@babel/plugin-transform-runtime", {"corejs": 2, // polyfill with @babel/ runtimecorejs2 "useBuildIns": "Usage" // on demand, i.e. packaging of new features with new features, can reduce packaging volume '}]]}Copy the code
11NPM install -d babel-loader// babel-loader uses Babel to compile projects
   npm install -D style-loader css-loader  // style-loader, css-loader compiles CSS files
   npm install -D url-loader file-loader // Import file path (image, font)
   npm install -D less less-loader // less-loader identifies less files
Copy the code
Import HomePage from './home/home' by default loads index.js in the home folder.Copy the code
12NPM install -g http-server and CD dist execute: http-serverCopy the code
Install -s react-router-dom install -s react-router-domCopy the code
14NPM install -d copy-webpack-plugin is required if the static file is not loaded through index. HTMLnew CopyWebpackPlugin({
      patterns: [{from: utils.resolve('.. /static'), // Which directory to copy from
          to: 'static' // Copy to which directory}]}) can then be imported directly into index.htmlCopy the code
NPM install antd --saveCopy the code

3. Scheme 2: config-overrides configuration

1, install antd package NPM install antd 2, install the react + webpack configuration dependent on NPM install the react - app - rewired customize - cra Babel - plugin - import 3, NPM install less less-loader 4 Configure the config-overrides. Js file in the root directoryCopy the code
const {override,fixBabelImports,addLessLoader} =require('customize-cra'); Module. exports = override(// implement on-demand packaging for ANTD: Package according to import (using babel-plugin-import) fixBabelImports('import',{libraryName:'antd', libraryDirectory:'es', Style :true,// automatic packaging related styles default to style:' CSS '}), // use less-loader to respecify the source code of less variables, AddLessLoader ({javascriptEnabled: true, modifyVars:{'@primary-color':'#1DA57A'},}));Copy the code
Json file "scripts": {"start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react--app-rewired test", "eject": "react-scripts eject" },Copy the code

4,

Encountered in the work of such requirements, would like to see such a configuration, of course, building a react project project, there are many kinds of practical work will need to be configured in many other plug-ins, loader, etc., the configuration of the above, just record the commonly used tools, there are a lot of things need to improve, later I will also continue to improve, convenient for later use.