Preface:

Hello, guys! Note the title ~ the purpose of this article is to record learning, self entertainment. If I can help some other students who are not familiar with Webpack, I will be happy, but please don’t spray.

What are the core concepts of WebPack

  1. Entry: the entrance
  2. Output: the export
  3. Loader: converter
  4. Plugins: plugins

.

entry

  • Definition: WebPack recursive entry file
// String: single entry, packaged into a chunk, output a Buldle file. The default trunk name is main.js
entry: "./src/index.js".// Array: multiple entry files. All entry files will form a chunk, and only [one] bundle file will be exported
entry: ["./src/index.js"."./src/foo.js"].// object: multiple entries. Several entry files form several chunks and output several bundle files. The trunk name is the key value of the object
entry: {index:"./src/index.js".foo:"./src/foo.js",}Copy the code

output

  • Definition: Tells WebPack where to output the bundles it creates and how to name them.

    The output of the production environment needs to distinguish the versions and changes by the Contenthash value to achieve the effect of clear cache, while the local environment does not introduce Contenthash for the sake of building efficiency.

    output: {
        // Output file directory (public directory for future output of all resources, including CSS, static files, etc.)
        path: path.resolve(__dirname, "dist"), / / the default
        // File name (specify name + directory)
        filename: "[name].[contenthash:8].js"./ / the default
        // The name of the chunk of the non-entry file.
        chunkFilename: "[contenthash:10].chunk.js".// Introduce a common path prefix for all resources, usually used in production environments. Use with care
        publicPath: "",},Copy the code
  • Filename and chunkFilename

Filename is the name of the exported file listed in the entry.

ChunkFilename is the name of the file that is not listed in the entry but needs to be packaged. (for example, asynchronous lazy loading)

loader

Loader is a file loader that loads resource files and processes them and packages them into specified files. Colloquial: Webpack itself can only understand JavaScript and JSON files, and Loader lets Webpack handle other files.

  1. Multiple Loaders can be used to process a file, and loaders are loaded in reverse order of configuration
  2. The first loader to execute takes the content of the source file as a parameter, the next loader takes the return value of the previous loader as a parameter, and the last loader returns the javaScript source code for the module
// Load the style
      {
        test: /\.(css|less)$/i,
        include: path.resolve(__dirname, ".. /src"),
        // Multiple loads: from right to left, from bottom to top
        use: [
          "style-loader".// the js module --> insert the DOM
          "css-loader".// CSS --> js module
          "less-loader"   // less --> css]},Copy the code

plugin

During the lifetime of WebPack running, there are many events broadcast (event listeners in hooks), which the plugin can listen to (hooks declaration cycles in apply methods) and change the output when appropriate using the API provided by WebPack.

plugins: [
    new HtmlWebpackPlugin(),// Generate HTML to automatically import all bundles].Copy the code

⭐️ Differences between loader and plugin

Loader is A converter that compiles A file into B file. It only does simple file conversion

Plugin is an extender: it does not directly manipulate files during the webPack packaging process, but performs specific operations at different stages of the WebPack life cycle.

New webPack5 feature: Module

Webpack5.0 adds asset Module, which is a module type that allows you to use resource files (fonts, ICONS, etc.) without having to configure an extra loader. The following four configurations are supported:

  1. Asset/Resource sends a separate file and exports the URL. Previously, it was implemented using file-loader.
  2. Asset/Inline exports the data URI of a resource. Previously it was implemented using url-loader.
  3. Asset /source Exports the source code of the resource. Previously it was implemented using a RAW-loader.
  4. Asset automatically selects between exporting a data URI and sending a separate file. This was previously achieved by using url-Loader and configuring resource volume limits.