Because webpack is a tool based on nodejs, the nodejs knowledge involved in the learning process will be explained and divergently expanded.
webpack Chinese documentation
one,
= {
entry: './path/to/my/entry/'
};
The exports variable is available within the file-level scope of the module and assigned to the module before execution. In nodejs, two objects are provided, exports and require, where exports are the interfaces exposed by the module. Require is used to obtain the interface of a module from the outside, that is, the exports object of the obtained module. In the interface thrown by exports, if you want your module to be a special object type, please use it; if you want the module to become a traditional module instance, please use it; it is the real interface, and exports is just an auxiliary tool for it. The final return to the call is not exports. Here is an example of the nodejs official website
function require(/* ... */) {
const module = { exports: {} };
((module, exports) => {`Please enter the code`
// The module code is here. In this example, a function is defined. function someFunc() {}
exports = someFunc;//In other words, when you assign the exports individually, exports do not belong to module, it is a separate variable // At this time, exports is no longer a shortcut to // And this module still exports an empty default object. = someFunc;//The exported functions here are hung in the module so they will be imported // At this point, the module exports someFunc instead of the default object. })(module, );
return ;// Here is the explanation of this sentence (the final return to the call, not exports) }
2. Entry
The entry start point, the file pointed to by the file path configured by entry is the entry file of the project, that is, the beginning of the internal dependency will load the dependency layer by layer according to the entry file. Chunk is related to the configuration of the entry file during packaging. If the entry is a string or array, only one Chunk will be generated. At this time, the name of the Chunk is main. If the entry is an object, multiple Chunks may appear. At this time, the name of the Chunk is the name of the object key-value pair.
entry accepts three types of values
1. Single-entry writing String example:
entry: './app/to/my/entry/'
entry：{ main:"'./app/to/my/entry/'"}
2. Single-entry array writing method Array example:
entry：['./app/entry1', './app/entry2']
The way to pass in an array is useful when you want multiple dependency files to be injected together and direct their dependencies to a "chunk". That is to say, the dependent modules of multiple files are merged.
3. Object syntax Object example:
entry：{ a: './app/entry-a', b: ['./app/entry-b1', './app/entry-b2']}
Separate third-party modules and public modules
Separating third-party modules and webpack running files and other common modules is to avoid excessive waiting time for loading and other optimizations. When your different entry files rely on the same third-party modules, they need to be removed. Here we mainly use the object syntax of entry and CommonsChunkPlugin. Examples of practical applications:
1. Separate business modules and public modules (webpack files, third-party modules, custom public modules)
const path = require("path");
const webpack = require("webpack");
const packagejson = require("./");
const config = {
entry: {
first: './src/',//Introduced and second: './src/',//Introduced and vendor: ()//Get the production environment dependency library //Module name, returns an array, which involves single-entry array writing to merge multiple dependencies into a chunk // Here vue will be merged as a third-party library},
output: {
path: (__dirname,'./dist'),
filename: '[name].js'
},
plugins: [
new ({
name: 'vendor',//Specify that the existing chunk points to vendor here. The public modules will be merged into thischunkFile corresponding to name，Not specifying default generationnameforcommonsofchunk。
filename: '[name].js'//Extract the file name of the public part }),
]
}
= config;
2. Detailed separation of business modules, third-party dependencies, public modules, webpack running files
plugins: [//This step extracts the webpack running file new ({//First remove the public module used name: 'vendor',
filename: '[name].js'
}),
new ({//Specify vendor to extract webpack running file from it name: 'runtime',
filename: '[name].js',
chunks: ['vendor']
}),
new ({
name: ['vendor','runtime'],
filename: '[name].js',
minChunks: Infinity//Only when the entry file (entry chunks) >= 3 takes effect, // Used to separate custom public modules in third-party libraries }),
new ({
name: 'common',
filename: '[name].js',
minChunks:2,//Default is 2, which means how many chunk references the module will be removed by the module before it is withdrawn. //Because common is referenced by first and second, it will be withdrawn chunks: ['first','second']//Extract commons chunk from the same }),
]
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.