entry

output

mode

loader

plugin

chunk

module

bundle

entry: 

Specify the WebPack Entry file: The first step in a WebPack build will start with Entry, which can be abstracted as input

// single entry SPA, essentially a string
entry: {index: './src/index.js'} == equivalent to shorthand === entry:"./src/index.js"
// Multiple entry is an object for SEO
entry: {index:"./src/index.js".login:"./src/login.js"
}
Copy the code

output:

Package the transformed file and output it to disk location: Output the result, after Webpack has gone through a series of processes to produce the desired code.

output: {
 filename: "bundle.js".// The output file name
 path: path.resolve(__dirname, "dist")// Output file to disk directory, must be an absolute path
},
 
// Multi-entry processing [name][hash][chunkhash]
output: {
 filename: "[name][chunkhash:8].js".// Use placeholders and do not repeat file names
 path: path.resolve(__dirname, "dist")// Output file to disk directory, must be an absolute path
},

Copy the code

Placeholder details

[name] : indicates the name of the entry file

[hash] : The hash version number is useful for caching when the source code (the code in the entry file) changes

[chunkhash] :

[contenthash] 

mode

Mode specifies that the current build environment production Development None setting Mode automatically triggers webpack built-in functions for optimization

Loader module processor

Make WebPack support more modules

Module resolution, module converter, used to convert the original content of the module into new content as required. Webpack is a module packaging tool, and modules are not only JS, but also CSS, images or other formats. However, WebPack only knows how to handle JS and JSON modules by default, so other formats of module processing, and processing methods need loader

style-loader
css-loader
less-loader
sass-loader
ts-loader // convert Ts to js
babel-loader// Convert ES6, 7 and other new JS feature syntax
file-loader// Process the image subgraph
eslint-loader
...
Copy the code

Loader: file-loader moves the resource module identified in the package entry to the output directory and returns an address name. Scenario: when we need a module, we can use file-loader to handle TXT, SVG, CSV, Excel, image resources, etc., just move it from source code to package directory

Css-loader analyzes the relationship between CSS modules and synthesizes a CSS. Serialize CSS, place CSS code in JS (bundle)

Style-loader will mount the content generated by CSS-loader to the head section of the page in style

module

Modules, in Webpack everything is a module, a module corresponds to a file. Webpack recursively finds all dependent modules from the configured Entry. When webpack processes an unknown module, it is necessary to configure the module in Webpack. When the module is detected, what loader is used to process it.

module: {
	rules: [{
			test: /\.(png|jpe? g|gif)$/.//use a loader to use objects, strings; Both loaders need arrays
			use: {
				loader: "file-loader".// options Additional configuration, such as resource names
				options: {
					// placeholder [name] Name of the old resource module
					// [ext] old resource module suffix
					// https://webpack.js.org/loaders/file-loader#placeholders
					name: "[name]_[hash].[ext]".// The packing location
					outputPath: "images/"}}},//]}Copy the code

plugin

Plugins can do things for you when WebPack is running at a certain stage, similar to life cycle concept extensions that inject extension logic at certain points in the WebPack build process to change the build result or do what you want. Apply to the entire build process

**HtmlWebpackPlugin **HtmlWebpackPlugin automatically generates an HTML file after packaging, and introduces the JS module generated by packaging into the HTML.

Htmlwebpackplugin configuration:

Title: The title element used to generate the pagefilename: Specifies the output HTML file name. The default is index.html, or you can configure it directly with subdirectories.template: template file path, support loader, such as HTML! ./index.htmlinject: true | 'head' | 'body' | falseInject all resources into a specific template or templateContent if set totrueOr body, where all javascript resources are placed at the bottom of the body element,'head'Will be placed in the head element.favicon: Adds the specific Favicon path to the output HTML file.minify| : {}falsePass the HTML-minifier option to the Minify outputhash: true | falseIf fortrue, will add a unique Webpack to compile hash to all contained scripts and CSS files, useful for decaching.cache: true | falseIf fortrue, which is the default and will publish files only after they have been modified.showErrors: true | falseIf fortrueThis is the default, and error messages are written to the HTML pagechunks: allows you to add only certain blocks (for example, only unit test blocks)chunksSortMode: Allows control blocks to be sorted before being added to a page. Supported values:'none' | 'default' |
{function} -default: 'auto'
excludeChunks: allows certain blocks to be skipped, (For example, skip blocks of unit tests)
Copy the code

Clean-webpack-plugin removes redundant files

bundle

The output resource file

module.exports = {
    entry: './main.js'.// An entry
    output: {
      filename: 'bundle.js'}};Copy the code

Circled in the picture belowjsfile

chunk

When a module is processed by Webpack, it becomes chunk

The chunks are circled in the picture below

Summary: A chunk can correspond to a module and a chunk can correspond to one or more modules and a bundle to a chunk. (Bundles are not equal to chunks, because bundles also have startup functions.) We generally call js files bundles