Use react-app-rewired and customize-cra default custom configuration webpack

A recent study react framework has been used before vue development, know know how to configure it contributes to the development of related webpack in vue, the school react the process, I also think that how these configuration ah, so there is this article.

 

This article is about the react-create-app generation projects using the react-app-rewired and customize-cra configuration

1. First, we create a project myapp, execute the command

npm create react-app myapp

2. Then install REACT -app -rewired and Customize -cra 

npm install react-app-rewired customize-cra  --save-dev

3. rewrite start command package.json

/* package.json */
原来的：
"scripts": {
  "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"

}

修改后的：
"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test",
   "eject": "react-scripts eject"
}

Npm start implementation of the project started directly 4. After modification, you will find an error, it does not matter, the error is solved, you will find that there is an error message:

The "injectBabelPlugin" helper has been deprecated as of v2.0
Translation:
Since version 2.0, "injectbabelplugin" Assistant has been deprecated

The new version of the react-app-rewired removed injectBabelPlugin, these methods are moved to a new package named 'customize-cra' in

 The solution is to reduce version, execute two commands:

Uninstall App-REACT-NPM rewired   // delete the original 
NPM-App-REACT rewired the install @ 2.0 . 2 --save-dev   // install the specified version of the bottom

After executing the command npm start, the project can run up

The root of the project will be one more configuration file config-overrides.js (if not, manually create)

   Then do some webpage configuration, such as plug-in configuration path alias, ui plug-demand loading, modify, add loader

Directly on the complete code, annotated

const { override, fixBabelImports ,addWebpackExternals ,addWebpackAlias ,addLessLoader } = require('customize-cra');
const path = require("path")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const myPlugin = [
  new UglifyJsPlugin(
    {
      uglifyOptions: {
        warnings: false,
        compress: {
          drop_debugger: true,
          drop_console: true
        }
      }
    }
  )
]

module.exports = override( 
  fixBabelImports('import', { //配置按需加载
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addWebpackExternals ({// do packing process configuration, such as to direct introduction cdn 
    echarts: "window.echarts", 
    // Highcharts: "window.highcharts" 
  }), 
  addWebpackAlias ({// path alias 
    '@': path. Resolve (__ dirname, 'the src'), 
  }), 
  addLessLoader ({ 
    JavascriptEnabled: to true, 
    modifyVars: { 
      '@ Primary-Color': '# 1DA57A' 
    } 
  }), 
  (config) => {// exposed configuration config webpack of , EVN 
    // remove the packing production map file 
    // config.devtool = config.mode === 'Development' 'Cheap-Module-Source-map':? false; 
    IF (process.env.NODE_ENV === "production's" ) = config.devtool to false;  
    IF (process.env.NODE_ENV == "!development") config.plugins = [...config.plugins,...myPlugin]
    //. 1 modifications, additions loader configuration:
    // All loaders rule is the second in config.module.rules (array)
    // namely: config.module.rules [2] .oneof (if not, what are the specific print several projects) 
    // modify sass configuration rules loader in the fifth item (see the specific configuration) 
    const = loaders config.module . .rules.find (rule => Array.isArray (rule.oneOf)) the oneOf; 
    loaders to [. 5] .use.push ({ 
      Loader: 'Sass-Resources-Loader', 
      Options: { 
        Resources: path.resolve (__ dirname , 'src / asset / base.scss' ) // scss global file common introduced 
      } 
  }) 

    
    return config 
  } 

);