Autoprefixer is a front-end that can be understood. It is used with postCSS automatically prefixed by the browser. If you want to configure postCSS in more detail, please go to the mobile end.
The html-webpack-plugin generates an HTML file for you that has been automatically injected with packaged JS
Case-sensitive paths-webpack-plugin – This plugin is designed to prevent path errors due to case-sensitive paths-webpack-plugin
InterpolateHtmlPlugin This plugin is used in conjunction with html-webpack-plugin and allows you to use variables in index.html
// We can see the following code in index.html under public in create-react-app generated project
WatchMissingNodeModulesPlugin this is convenient to develop plug-ins, when you are in a project reference the node_modules is not installed, webpack complains the module not found, then after the installation is complete, you need to restart the service manually. WatchMissingNodeModulesPlugin this plugin is to help you save this step, you play the missing module installation, webpack will automatically restart.
eslintFormatter emmmm…. eslint
ModuleScopePlugin is a plugin that prevents you from introducing resources outside the SRC and node_modules folders in your current project, since only code in the SRC folder will be translated by Babel.
Webpack NamedModulesPlugin this plug-in is returned directly update file name when heat load, rather than file id, convenient for developers. specific
Webpack.defineplugin DefinePlugin allows you to create a global constant that can be configured at compile time. This can be very useful when the development mode and the release mode are built to allow different behaviors. For example, we distinguish the domain name between the test environment and the formal environment
new webpack.DefinePlugin({ PRODUCTION: process.env.NODE_ENV === “production”, DEVELOPMENT: Process.env.node_env === “development”}) Then declare this variable in package.json if esLint is used in js code
“EslintConfig “: {“extends”: “react-app”, // extends the enabled rule configuration “globals”: {“PRODUCTION”: False // false does not allow PRODUCTION to be overridden, read-only property “DEVELOPMENT”: }} if(PRODUCTION){domain = www.production.com}else{domain = www.development.com} Webpack HotModuleReplacementPlugin module hot replacement plugin, cereate react – only CSS transformation have a hot replacement in the app, js changes will refresh the page.
IgnorePlugin WebPack ignores packaged resources.
Webpack.config.prod. js extract-text-webpack-plugin splits CSS from JS bundle, reduces JS file size, and loads faster.
The webpack-manifest-plugin plugin is a JSON file generated during build packaging that shows the mapping between the compiled file and the compiled file.
Sw-precache-webpackplugin SWPrecacheWebpackPlugin is a Webpack plug-in for caching external project dependencies using the Service worker.