Confirm the demand

I am a React stack, so there must be a React family bucket in the scaffolding project. For the rest of the WebPack configuration, I decided to refer to the open source scaffolding tool, which should be pretty much the same. I’d like to take this opportunity to sort this out.

base.config

  1. HTML Template (HTML-webpack-plugin)
  2. Extract-text-webpack-plugin for CSS Extraction
  3. Common Module Extraction Plugin (CommonsChunkPlugin)
  4. Webpack-hot-middleware
  5. Entrance and exit setup
  6. Loader Settings in module. Loaders include: Postcss-loader and csS-loader for less or Sass or JS/JSX files Postcss-loader does some extra work), url-loader to handle images, and file-loader to handle font files
  7. Will there be a resolve config that tells us what to do with the Module, alias and Extensions that are easy to develop

That’s the basic configuration of base.config. Let’s take a look at the other configuration items

  1. ServerConfig. Used to configure server running code. You’ll use a plug-in called open-browser-webpack-plugin that automatically opens the browser
  2. ProxyConfig. Remote proxy configuration items, developed separately from the front and back ends, require cross-domain requests, using this configuration.
  3. StaticConfig. Static service hosting, this is currently not understand do not know how to set

Webpack configuration for the development environment

  1. Webpack HotModuleReplacementPlugin, this plugin is used to make thermal load, someone said to online and webpack – hot – middleware together, didn’t understand, research clearly on the cover. Webpack official documents are written using HotModuleReplacementPlugin to deal with thermal load.
  2. Automatically opens the browser page. OpenBrowserPlugin
  3. DefinePlugin, which is used to create a global constant that can be determined at compile time, is used to determine the development environment and production environment

Production Environment Configuration

  1. UglifyJsPlugin code uglifyJsPlugin
  2. Clean up the dist directory, CleanWebpackPlugin

This is pretty much the configuration you should have, so now that you’ve figured out how to write a scaffolding and get ready to use Yeoman, do some preparatory work first