Summary of commonly used loaders and plugins for webpack project practical summary

One, commonly used loader

1. JavaScript Related, as follows:

• babel-loader: The ES6converted ES5;
• script-loader: May be specified module JavaScriptfile into a string by pure evalimplementation;
• exports-loader: You can export the specified object, for example window.Zepto;
• ts-loader: The TypeScriptconverted JavaScript;
• imports-loader: Add any of the three parties object to the windowobject.

2. The style is related, as shown below:

• style-loader: The CSScode into the JavaScriptby DOMoperation to load CSS;
• css-loader: Load CSS, support modularization, compression, file import and other features;
• postcss-loader: CSSPost-processor postcssof loader;
• less-loaderOf: lessconverting code into CSSthe code;
• sass-loaderOf: SCSS/SASSconverting code into CSSthe code;
• fast-sass-loader: Parallel processing SCSS/SASSfile, than Sass-loaderfaster 5~10times loader;
• stylus-loaderOf: Stylusconverting code into CSSthe code;
• mini-css-extract-pluginOf loader: the CSSstyles extract the contents to CSSa file.

3. Static resources are related, as shown below:

• raw-loader: Load the content of the text file into the code;
• file-loader: Output to a file folder in the code by a relative URLreference to the output file;
• url-loader: And file-loaderthe like, but can in case of very small file in base64a manner to inject the contents of the file to the code;
• html-loader: HTMLGrammar loader, can be processed HTMLin the picture, CSSand so on;
• svg-url-loader: The compressed SVGcontent is injected into the code;
• markdown-loader: To Markdownconvert the file into HTML;
• ejs-loader: The EJSstencil compiled into function return;
• pug-loader: To Pugconvert into a template JavaScriptfunction returns;
• image-webpack-loader: Load and compress image files;
• csv-loader: Load the csvfile contents;
• xml-loader: Load the xmlcontents of the file.

4. Engineering related, as shown below:

• eslint-loader: By ESLintchecking JavaScriptcodes;
• tslint-loader: By TSLintchecking TypeScriptcodes;
• mocha-loader: Load Mochatest code.

5. Others, as follows:

• vue-loader: Load Vue.jssingle-file assembly.

Two, commonly used plugin

1. Webpack The built-in plugins are as follows:

• webpack.DefinePlugin: Define global constant plug-ins;
• webpack.EnvironmentPlugin: Define the environment variable plug-in;
• webpack.BannerPlugin: Add copyright notes etc. to the code;
• webpack.DllPlugin: Using DLLideas to speed up the compilation speed of the plug;
• webpack.HashedModuleIdsPlugin: You can modify the file Hashplug-in algorithms;
• webpack.optimize.SplitChunksPlugin: Code splitting optimization plug-in;
• webpack.HotModuleReplacementPlugin: Turn on the module hot replacement function, by monitoring file changes and automatically loading the modified files to reduce the annoying browser manual reloading;
• webpack.ProgressPlugin: Build progress plugin;
• webpack.ProvidePlugin: Auto-loading modules, such as occurs $the load jQueryand other common library;
• webpack.IgnorePlugin: Used to ignore some files

2. The non-built-in plug-ins are as follows:

• mini-css-extract-plugin: CSSFile is extracted, and is constructed in a production environment can be used to optimize CSSthe file size;
• optimize-css-assets-webpack-plugin: Compressed CSSfiles;
• clean-webpack-plugin: Clean up the specified contents of the specified directory before compiling;
• html-webpack-plugin: htmlPlug-in, you can JavaScriptgenerate a template file HTML;
• preload-webpack-plugin: html-webpack-pluginPlugins page to add <link rel="preload">resources;
• i18n-webpack-plugin: Help web pages to be internationalized plug-ins;
• webpack-manifest-plugin: Generate Webpackpackaged plugin file list;
• html-webpack-inline-source-plugin: In HTMLthe inline package out of resources;
• webpack-bundle-analyzer: webpack bundleAnalysis plug-in;
• copy-webpack-pluginCopy file copy plugin to a specified folder: outputfolders for the packing line;
• terser-webpack-plugin: JavaScriptCode compression plug-in that is compatible with ES6the syntax, it is recommended to use this plug-in, rather than uglifyjs;
• serviceworker-webpack-plugin: Generating PWA service workerplug;
• hard-source-webpack-plugin: Improve the speed of non-first compilation through caching;
• friendly-errors-webpack-plugin: Reducing Webpackuseless construct log;
• stylelint-webpack-plugin: StyleLintThe plugin.