webpack.config.js packaging syntax

Meaning of slash '/'
In the configuration, "/" represents the url root path
For example: http://localhost:8080/dist/js/test.js http://localhost:8080/

Path in node

attribute	describe
__dirname	Returns the absolute path of the folder where js is executed
__filename	Returns the absolute path of the js to be executed
process.cwd()	Returns the absolute path of the folder where the node command was run

1. context

The string of the absolute path of the directory where the entry file is located
Syntax: Context: String

Basic directory, absolute path, used to parse entry point and loader from configuration

const path = require('path');

module.exports = {
	// ...
	context: path.resolve(__dirname, 'app')
};

The current directory is used by default, but it is recommended to pass in a value in the configuration. This makes the configuration independent of CWD (current working directory)

2. entry

The entry point indicates which module webpack should use as the start of building its internal dependency graph. After entering the entry starting point, webpack will find out which modules and libraries the entry starting point (direct and indirect) depends on
The default value is ". / src/index.js", but you can specify one (or more) different entry starting points by configuring the entry property in the webpack configuration
entry configuration is required. If it is not filled in, webpack will exit with an error

The entry of configuration module can be abstracted as input. The first step of webpack execution is to search and recursively resolve all the modules that the entry depends on

Simple rule: every HTML page has an entry point
Single page application (SPA): an entry point
Multi page application (MPA): multiple entry points

What is Chunk?

Chunk means code block. When webpack performs a build, it will merge multiple modules into a file, which is called chunk
webpack takes a name for each generated Chunk. The name of the Chunk is related to the configuration of the Entry
(1) If entry is a string or array, only one Chunk will be generated, and the name of the Chunk is main
(2) If entry is an object, multiple chunks may appear, and the name of the Chunk is the name of the object key value pair

Entry parameter type

The Entry type can be one of the following three or a combination of them
Syntax: Entry: string | array | object

type	example	meaning
string	'./app/entry'	The file path of the entry module, which can be a relative path
array	['./app/entry1', './app/entry2']	The file path of the entry module, which can be a relative path
object	{ a: './app/entry-a', b: ['./app/entry-b1', './app/entry-b2']}	Configure multiple entries, and each entry generates a Chunk

If it is of array type, only the module of the last entry file in the array will be exported when it is used with the output.library configuration item

(1) Single entry syntax for the entry property

① : create a new project. The directory structure is shown in the figure below

|-- src
|   | -- common.js
|   | -- index.html
|   | -- main.js
| -- webpack.config.js

② : configure the configuration file of webpack (webpack.config.js)

Syntax: entry: string | [string]

// 1. Import the path module from the node environment
const path = require('path');

// 2. Declare to export an object
module.exports = {
	// 3.JavaScript execution entry file
	mode①: entry: './src/main.js',
	mode②: entry: {
		main: './src/main.js'
	},
	output: {
		// 4. Put the output bundle.js file in dist directory
		path: path.resolve(__dirname, './dist'),
	}
};

③ : configure webpack package entry file (main.js)

// 1. Import showHelloWorld function through CommonJS specification
const showHelloWorld = require('./common.js');
// 2. Execute the showHelloWorld function
showHelloWorld('Webpack Installation and use of');

Common.js = > the project stores the common code file

function showHelloWorld(content) {
	alert('hello world')
}

// Export showHelloWorld function through CommonJS specification
module.exports = showHelloWorld;

④ : the first page of the project (index.html) uses. / dist/main.js

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
	<div id="app"></div>
</body>

<!-- Import webpack Output JavaScript file -->
<script src="../dist/main.js"></script>

</html>

⑤ : execute the webpack command

Output directory structure after packaging (one more main.js file)

| -- dist
|   | -- main.js
| -- src
|   | -- common.js
|   | -- index.html
|   | -- main.js
| -- webpack.config.js

be careful:
The main.js file packaged by webpack 3 after executing the webpack command is not compressed;
The main.js file packaged by webpack 4 is compressed. If you want the packaged file not compressed, you can execute the following command:

command	describe
webpack --mode development	No compression after packing
webpack --mode production	Compression after packaging
webpack	Compression after packaging

(2) Array syntax

You can also pass an array of file paths to the entry property, which creates a so-called multi main entry. This is useful when you want to inject multiple dependency files at a time and guide their dependency graph to a chunk

webpack.config.js

module.exports = {
	entry: [ // entrance
		'./src/main_1.js',
		'./src/main_2.js'
	],
	output: {
		filename: 'bundle.js'
	}
}

When you want to quickly set up a webpack configuration for an application or tool through an entry (such as a library), the syntax of a single entry is a good choice. However, there is little flexibility in using this syntax to extend or adjust the configuration

① : create a new project. The directory structure is shown in the figure below

|-- src
|   |-- common.js
|   |-- index.html
|   |-- main.js
|   |-- show.js
| -- webpack.config.js

② : configure the configuration file of webpack (webpack.config.js)

const path = require('path');

module.exports = {
	// JavaScript execution entry file
	entry: ['./src/main.js', './src/show.js'],
	output: {
		// Put the output bundle.js file in the dist directory
		path: path.resolve(__dirname, './dist'),
	}
};

③ : configure webpack package entry file (main.js), 2

First: main.js

// 1. Import showHelloWorld function through CommonJS specification
const showHelloWorld = require('./common.js');
// 2. Execute the showHelloWorld function
showHelloWorld('Webpack Installation and use of');

Common.js = > the project stores the common code file

function showHelloWorld(content) {
	alert('hello world')
}

// Export showHelloWorld function through CommonJS specification
module.exports = showHelloWorld;

Second: show.js

alert("is show.js")

④ : the first page of the project uses (index.html) to use the packaged file

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
	<div id="app"></div>
</body>
<!-- Import webpack Output JavaScript file -->
<script src="../dist/main.js"></script>
</html>

⑤ : execute the webpack command

The output directory structure after the webpack --mode development command is executed (a main.js file is added)

|-- dist
|   | -- main.js
|-- src
|   |-- common.js
|   |-- index.html
|   |-- main.js
|   | -- myjQuery.js
| -- webpack.config.js

Look at the source code *: you can find the core code extracted from the package, in which the sequence of code execution is marked with serial number. The difference between the entry configuration as array and string is the number of entries loaded in step 4. If it is an array, there will be multiple loading entries. If it is a string, there will be only one loading entry
Note: before webpack3, the parameters received by modules were arrays; The parameters received by modules in webpack4 are objects