What is webpack? What’s the use?

1. It is a modular management and packaging tool for front-end resources.

2. Can make front-end development more modular. To be specific, the loose modules are packaged into front-end resources that conform to the current environment deployment according to dependencies and rules. Load on demand (asynchronous); With loader conversion, any resource can be treated as a module, such as CommonJS, AMD, ES6, JSON, LESS, images, etc.

Some common terms for webpack:

  • Chunk: the packaged code block. Contains multiple modules that exist at stages in the WebPack process. Not all chuncks will be the final output file.
  • Bundle: Generated by one or more different chuncks and contains the final version of the source code processed.
  • Module: is a module that WebPack supports parsing.
  • Runtime: Links the loading and parsing logic required by modules when they interact.

Core concepts: 1. Import 2. Output 3. The plug-in

Entry: Entry can be considered as the root context or the first startup file of the app.

Grammar:

  1. A single entry grammar entry: string | Array to entry into an Array will create multiple main entrance (by a number of separate dependency graph).

  2. Object syntax entry: {[entryChunkName: string] : string | Array}, tedious but extensible degree is high.

Multi-entry scenario: 1. Separate the application from the common library. 2. Multiple page applications.

Note: It is not recommended to use arrays as entries in the library.

Output: Specify only one output configuration, even though more than one entry starting point can exist.

Syntax: output: {filename: string}, if multiple entries, placeholders should be used to ensure that each file has a unique name, eg: filename: ‘[name].js’.

Mode: Tells Webpack to use the built-in optimization mode of the corresponding mode.

Syntax: mode: string, defaults to ‘production’, placeholders should be used to ensure that each file has a unique name, eg: filename: ‘[name].js’.

Parameters:

1. Development environment.

The value of process.env.node_env in DefinePlugin is set to development. Enable valid names for modules and chunks. Enable NamedChunksPlugin and NamedModulesPlugin.

2. Production environment.

Enable FlagDependencyUsagePlugin FlagIncludedChunksPlugin, ModuleConcatenationPlugin NoEmitOnErrorsPlugin, OccurrenceOrderPlugin SideEffectsFlagPlugin and UglifyJsPlugin

4. Plugin plugin: Designed to solve other things that loader cannot implement.

A plug-in is a JS object with the Apply attribute. The new instance is passed to the plugins parameter.

Other Common Configurations

Loader: used to convert the source code of a module. Preprocess files when importing or “load “modules.

Why do I need a Loader? Because integrated modules need to be transformed into code that JS can recognize and run.

Syntax: The test attribute identifies one or more files that should be converted by the corresponding Loader. Use attribute: Indicates which loader should be used for conversion. {test: /. CSS $/, use: ‘css-loader’},

2. Resolve: Configures how the module resolves.

Why do I need a Loader? Because integrated modules need to be transformed into code that JS can recognize and run.

Syntax: resolve: {object}

Common attributes:

  1. Extensions: Extensions that are automatically resolved. Default values are [‘.wasm’, ‘.mjs’, ‘.js’, ‘.json’]

  2. Alias: Create an alias for import or require to make module introduction easier. Eg: alias:{‘SRC’: path.join(__dirname, ‘.. ‘, “src”)}

  3. Module: Contains options that determine how different types of modules in a project are handled.

    Common attributes: rules, an array of objects with attributes such as test, include, exclude, and Resource.