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
- HTML Template (HTML-webpack-plugin)
- Extract-text-webpack-plugin for CSS Extraction
- Common Module Extraction Plugin (CommonsChunkPlugin)
- Webpack-hot-middleware
- Entrance and exit setup
- 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
- 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
- ServerConfig. Used to configure server running code. You’ll use a plug-in called open-browser-webpack-plugin that automatically opens the browser
- ProxyConfig. Remote proxy configuration items, developed separately from the front and back ends, require cross-domain requests, using this configuration.
- StaticConfig. Static service hosting, this is currently not understand do not know how to set
Webpack configuration for the development environment
- 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.
- Automatically opens the browser page. OpenBrowserPlugin
- 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
- UglifyJsPlugin code uglifyJsPlugin
- 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