Inlet and outlet

model

Provides the mode configuration option to tell WebPack to use the built-in optimizations for the corresponding mode

  1. Set options in the configuration

    module.exports = {
  mode: 'production'
};
Copy the code

  2. From the CLI parameter

    webpack --mode=production
Copy the code

loader

A Web project usually contains static resources of various types, such as HTML, JS, CSS, templates, images, fonts, etc., and there is some relationship between these resources. For example, images and fonts may be referenced in CSS.

For Webpack, all of these static resources are modules that can be loaded as if they were a JS file

Output =loader(input)

1. Install

npm install --save-dev css-loader
Copy the code

2. The configuration

module.exports = {
  module: {
    rules: [{test: /\.css$/, use: 'css-loader'}]}};Copy the code
  • Test can accept either a regular expression or an array of regular expression elements. This rule is used only by modules on a regular match. In this case/\.css$/To match all of the.cssThe closing document.
  • Use accepts an array containing the loader used by the rule. In this example, only one CSS-Loader is configured

Loader features

  • ** Loader supports chain transfer. ** Can pipeline resources. A set of chained Loaders will execute in reverse order. The first loader in the loader chain returns a value to the next loader. On the last loader, the JavaScript expected by Webpack is returned.
  • Loader can also be usedoptionsObject to configure.

Plugins plugins

Plug-ins are designed to solve other things that loader cannot implement. Since plug-ins can carry parameters/options, you must pass a new instance to the plugins property in the WebPack configuration.

1. Install

npm install --save-dev html-webpack-plugin
Copy the code

2. The configuration

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const path = require('path');

module.exports = {
   entry:'./src/main.js'.output: {filename:'bundle.js'.path: path.resolve(__dirname, 'dist')},plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'}})];Copy the code

configuration

Since the WebPack configuration is a standard Node.js CommonJS module, you can do the following:

  • throughrequire(...)Import other files
  • throughrequire(...)Use NPM utility functions
  • Use JavaScript to control flow expressions, for example? :The operator
  • Use constants or variables for common values
  • Write and execute functions to generate partial configuration

At the same time to avoid

  • Access command line interface (CLI) parameters when using webpack command line interface (CLI)
  • Exporting indeterminate values (calling Webpack twice should produce the same output file)
  • Write long configurations (you should split the configuration into multiple files)

Basic Configuration Example

var path = require('path');

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

The module

In modular programming, developers break a program into discrete functional pieces called modules.

Each module has a smaller contact surface than the complete program, making verification, debugging, testing easy.

Well-written modules provide solid boundaries of abstraction and encapsulation, allowing each module in an application to have a coherent design and a clear purpose.

What is the Webpack module?

In contrast to node.js modules, Webpack modules can express their dependencies in a variety of ways. Here are a few examples:

  • ES2015 import statements
  • CommonJS require()statements
  • AMD define 和 requirestatements
  • @import statement in CSS /sass/ LESS files.
  • Style (url(...)) or images in an HTML file (‘ ‘)

Module parse

A resolver is a library that helps you find the absolute path to a module.

The dependent modules can be from application code or third-party libraries. Resolver helps WebPack find the module code to import in the bundle, which is included in each require/import statement.

When packaging modules, Webpack uses enhanced-resolve to resolve file paths, including three types of paths:

1. Absolute path

import "/home/me/file";
import "C:\\Users\\me\\file";
Copy the code

2. Relative path

import ".. /src/file1";
import "./file2";
Copy the code

3. Module path

import "module";
import "module/lib/file";
Copy the code

The cache

Each file system access is cached so that multiple parallel or serial requests for the same file can be triggered more quickly. In watch mode, only the modified files are removed from the cache. If watch mode is turned off, clear the cache before each compilation.

For more information on the above configuration, see Parsing API Learning.

Dependency graph

Any time one file depends on another, WebPack treats this as a dependency between files.

This allows WebPack to accept non-code assets (such as images or Web fonts) and provide them to your application as dependencies.

Starting at the entry point, WebPack recursively builds a dependency graph that contains each module required by the application, and then bundles all these modules into a small number of bundle-usually just one-that can be loaded by the browser.

The official documentation also provides concepts such as manifest, build goals, and module hot replacement