Webpack packaging tool analysis

Webpack is a static module bundler for modern JavaScript applications. When webpack processes an application, it recursively builds a dependency graph containing each module required by the application, and then packages all these modules into one or more bundles.

webpack mainly has four core concepts:

Entry
Output
loader
Plugins

Entry

The entry indicates which module the webpack should use as a starting point for building its internal dependency graph. After entering the entry point, webpack will find out which modules and libraries are directly and indirectly dependent on the entry point. There are many ways to define entries in webpack, such as the following example:

Single entry (abbreviated) syntax:

const config = {
  entry: "./src/main.js"
}

Object syntax:

const config = {
  app: "./src/main.js",
  vendors: "./src/vendors.js"
}

Output:

The output attribute will tell webpack where to output the bundles it created and how to name these files. The default value is. / dist:

const config = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  }
}

loader

Loader allows webpack to handle non JavaScript files (webpack itself only understands JavaScript). The loader can convert all types of files into modules that can be effectively handled by webpack. For example, ES6 is used during development, and the syntax of ES6 is converted to ES5 through the loader. The configuration is as follows:

const config = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "babel-loader",
          options: [
            presets: ["env"]
          ]
      }
    ]
  }
}

Plugins

Loaders are used to convert certain types of modules, while plug-ins can do more. Including packaging optimization, compression, defining environment variables, and so on. The plug-in has powerful functions and is a very important tool for webpack extension. It can be used to handle a variety of tasks. It's also very easy to use a plug-in, just require() and add it to the plugins array.

// adopt npm install
const HtmlWebpackPlugin = require('html-webpack-plugin');
// Used to access built-in plug-ins 
const webpack = require('webpack'); 
 
const config = {
  module: {
    rules: [
      {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "babel-loader"
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

Building applications using webpack

webpack.config.js

const path = require('path');
 
module.exports = {
  mode: "development", // "production" | "development"
  // choice development Is a development model, production Production mode
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: [
          presets: ["env"]
        ]
      }
    ]
  },
  plugins: [
    ...
  ]
}

The above example builds the simplest configuration. The webpack will be built from the main.js file of the entry, and JS conversion will be carried out through the loader to output a file called bundle.js. So far, the whole process is completed.

Posted by essexboy on Wed, 24 Nov 2021 01:50:35 -0800

Programmer Group