Difference between Loader and Plugin of Webpack

Loader

For conversion of module source, loader describes how webpack handles non-javascript modules and introduces these dependencies in buld. loader can convert files from different languages (such as TypeScript) to JavaScript, or inline images to data and URL. For example: CSS-Loader, Style-Loader, etc.

The use of loader is simple:

Specify loader in webpack. config. js. module. rules can specify multiple loader, with a global overview of each loader in the project.

loader is run in NodeJS and can be configured with options objects. plugin can bring more features to loader. loader can be compressed, packaged, translated, and so on.

loader is parsed from the template path, npm install node_modules. You can also customize loader and name it XXX-loader.

Processors for language classes loader: CoffeeScript, TypeScript, ESNext (Bable), Sass, Less, Stylus. webpack can be used by any development technology stack.

Plugin

The aim is to solve other things that loader can't achieve, from packaging optimization and compression to redefining environment variables, which is powerful enough to handle various tasks. webpack provides many plug-ins out of the box: CommonChunkPlugin is mainly used to extract the third-party library and common modules, so as to avoid the bundle file loaded on the first screen or the bundle file loaded on demand, which leads to too long loading time. It is an optimization tool. In multi-page applications, bundle can be created for application sharing code between each page.

webpack is powerful, and the difficulty lies in its configuration file. webpack4 does not need configuration file by default. One default configuration can be specified for webpack through mode option. mode is divided into development/production, and the default is production.

Plugins can carry parameters, so the new instance is passed in the plugins attribute.

"Mode" can be configured in config file or in CLI parameter: webpack-mode = production (1 will choose to configure in CLI, that is, npm scripts).

In versions below webpack4, webpack3. XX, environment variables are configured through plugins.

"resolve" module, resolver is a library to help webpack find the module code that bundle needs to introduce. When packaging, webpack uses enhanced-resolve to parse the path.

 resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'),
 }
 }

"Manifest" manages the interaction between all modules. runtime will be able to query the module identifier and retrieve the corresponding module behind it.

Problem 1: webpack calculates content hash as the file name by using bundle. The file is modified, and the new content hash executes to the new file. The cache is invalid, but the file content is not modified, and the calculated hash will still change, because the injection of runtime and manifest will change every time. To solve this file, you can learn more about runtime and manifest.

webpack principle: Start with the list of modules defined in the configuration file, process the application, recursively build a dependency graph from the entry file, and then package all modules into a small number of bundle, usually only one, which can be loaded by the browser.