Foreword

This article is based on ("React": "^17.0.2") version

The official scaffolding of the React scaffolding is to hide the webpack configuration. Before configuration, we need to expose the webpack configuration.

1. Enter the command NPM Run Eject

A command prompt will appear: This is a one -way operation. It is irreversible/returned after confirming the operation?

Inputy Return

After success, appear in the project root directoryconfig folder

2. Open the webpack.config.js file under the config folder

3. Find the New HTMLWEBPACKPLUGIN configuration item of Plugins, add content in the red box (for configuration CDN)

files: {
   js: [],
   css: []
}

4. Added the EXTERNALS configuration item, and the same level as the third step of Plugins (for modules that do not pack for packaging)

externals: {},

5. Configure build.js under the scripts folder

Note: Because the React development environment and the production environment use different files (you can view the scripts field of package.json), so you can directly configure the built.js file.

Note: The plum bidding here corresponds to the webpack.config.js file, and new htmlwebpackplugin () is corresponding to the corresponding position of the plugins configuration item.

// Configure cdn to introduce
config.plugins[0].options.files.js = [
  'https://lib.baomitu.com/react/17.0.2/umd/react.production.min.js',
  'https://lib.baomitu.com/react-dom/17.0.2/umd/react-dom.production.min.js',
  'https://lib.baomitu.com/redux/4.1.1/redux.min.js',
  'https://lib.baomitu.com/redux-thunk/2.3.0/redux-thunk.min.js',
  'https://lib.baomitu.com/react-redux/7.2.4/react-redux.min.js',
  'https://lib.baomitu.com/axios/0.21.1/axios.min.js',
  'https://lib.baomitu.com/lodash.js/4.17.21/lodash.min.js'
];
config.plugins[0].options.files.css = [];

// Configure files that are not packed in webpack
config.externals = {
  'react': 'React',
  'react-dom': 'ReactDOM',
  'redux': 'Redux',
  'redux-thunk': 'ReduxThunk',
  'react-redux': 'ReactRedux',
  'axios': 'axios',
  'lodash': '_'
};

6. Configure index.html, introduce the configuration CDN JS CSS link

<!-- require cdn assets css -->
<% for (var i in htmlWebpackPlugin.options.files && htmlWebpackPlugin.options.files.css) { %>
  <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.files.css[i] %>" />
<% } %>

<!-- require cdn assets js -->
<% for (var i in htmlWebpackPlugin.options.files && htmlWebpackPlugin.options.files.js) { %>
  <script type="text/javascript" src="<%= htmlWebpackPlugin.options.files.js[i] %>"></script>
<% } %>

7. Effect chart

If this article is helpful to you, I am glad to help you.

Of course, if you think the article makes you feel unreasonable, or there is a simpler implementation method or you can't understand it. I hope you can point it out after seeing it. Reply to you.