Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Webpack is a static module bundler for modern JavaScript applications. When WebPack works with an application, it recursively builds a Dependency graph containing every module the application needs, and then packages all of those modules into one or more bundles

Webpack has four core concepts

The entrance to the

Webpack. Config. Js in the configuration

module.exports = {
  entry: './src/index.js'
};
Copy the code

The second output

Webpack. Config. Js in the configuration

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.min.js'
  }
};
Copy the code

Three loader

Webpack Loader converts all types of files into modules that can be directly referenced by the dependency graph of the application

Four plug-ins (plugins)

Add the plugins you want to use to the plugins array with require(). Most plugins can be customized with options. You can also use the same plug-in multiple times for different purposes in a configuration file by using the new operator to create an instance of it.

Analyze the

The Webpack plug-in is a JavaScript object with the Apply attribute. The Apply attribute is invoked by the Webpack Compiler, and the Compiler object is accessible throughout the compile life cycle. With the function.prototype. apply method, you can pass any Function as a plug-in (this will point to compiler). We can use this approach to inline custom plug-ins in configuration.

//ConsoleLogOnBuildWebpackPlugin.js function ConsoleLogOnBuildWebpackPlugin() { }; ConsoleLogOnBuildWebpackPlugin.prototype.apply = function(compiler) { compiler.plugin('run', function(compiler, Callback) {console.log(" Webpack build process begins!!" ); callback(); }); };Copy the code