What is webapck

Webapck is a static module wrapper for modern JavaScript applications.

When WebPack processes an application, it recursively builds a dependency graph that includes each module of the application, and then packages those modules into one or more bundles

The core concept

  • Entry
  • Output
  • loader
  • Plugins

1. What is a Module in Webpack

Webpack support ESModule CommonJS, AMD, Assests (image, font, video, audio, json)

  1. ESM
  • Keyword export allows content in ESM to be exposed to other modules
  • The keyword import imports modules exposed in other ESMS

Tip: package.json, type: module -> ESM type: commonjs -> commonjs

  1. CommonJS

Module. exports, which allows content in CommonJS to be exposed to other modules

require

Tip: entry file and output path

Entry: Indicates which module WebPack should use to start building its internal dependency graph, default is./ SRC

Output: Tells WebPack where to export packaged bundles and how to name them. The default value is./dist

const path = require('path');

module.exports = {
  entry: './package/field/app.js'.output: {
    // __dirname Specifies the current absolute path
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-wepbakc.bundle.js'}}Copy the code

2. Webpack Modules, how to express their various dependencies?

  • ESM import statements
  • CommonJS require
  • AMD define require
  • css/sass/less @import

3. What is the difference between chunk and bundle? (key)

  1. Chunk

Chunk is a collection of Modules in the wepback packaging process, a concept in the packaging process

The packaging of Webpack starts with an entry module that applies other modules, and other modules reference other modules… Webpack packages modules one by one by reference, and these modules form a chunk

If there are multiple entry modules, multiple packaging paths may be generated, and each path will form a chunk

  1. Bundle

The final output of one or more files

  1. What is the relationship between Chunk and bundle?

In most cases, a chunk generates a bundle, but there are exceptions

If you add sourcemap, one entry, one chunk corresponds to two bundles

Chunk is a Chunk of code in the process, and bundle is the output of the package. Chunk is presented as a bundle after the build is complete

4. What do Plugin and Loader do respectively? How does it work?

1. Loader

Module converter, which converts non-JS modules into JS modules recognized by WebPack

In essence, WebPack Loader converts all types of files into modules that can be directly applied to an application’s dependency graph

Configuring the Loader in WebPack has two goals

  1. testProperty that identifies the files or files that should be converted by the corresponding loader
  2. useProperty indicating which loader to use for the conversion
module.exports = {
  output: {
    filename: 'my-first-webpack.bunle.js',},module: {
    rules: [{test: /\.txt$/, use: 'raw-loader'}}}]Copy the code

2. Plugin

The extension, at each stage of the WebPack run, broadcasts the corresponding event, which gives the plug-in the opportunity to listen for the corresponding event

Usage: In a WebPack configuration, pass a new instance to the Plugin property

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpcak = require('wbpack'); // Access the built-in plug-in

const config = {
  ...
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './scr/index.html'}})]module.exports = config;
Copy the code

3. Compiler

Object that contains all configuration information about the WebPack environment, including options, loader, and plugins, and is instantiated at webPack startup time. It is globally unique and can be interpreted as an instance of WebPack

4. Compliation

Containing the current module resources, the compile generation resource WebPack creates a new Compliation whenever it detects a file change while running in development mode

5. Can you briefly describe the packaging process of Webpack

  1. Initialization parameter: shell webpack.config.js
  2. Start compiling: Initialize a Compiler object, load all the configuration, and start compiling
  3. Determine entry: Locate all entry files according to the configuration in entry
  4. Compile modules: start with the entry module, call all loaders, and recursively find dependencies
  5. Complete module compilation: Get the final translated content of each module and the dependencies between them
  6. Output resources: Based on the obtained dependencies, they are assembled into chunks containing multiple modules
  7. Output complete: Determine the file name and file path to be output based on the configuration